Auth emulator does not work

I’ve been banging my head against this and cannot get it working. This is my app module:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NavBarComponent } from './nav-bar/nav-bar.component';
import { LayoutModule } from '@angular/cdk/layout';

import { AppMaterialModule } from './app-material/app-material.module';
import { FirebaseModule } from "./firebase/firebase.module";
import { RoutineListComponent } from './routines/routine-list/routine-list.component';
import { SessionRunComponent } from './sessions/session-run/session-run.component';
import { FormsModule } from "@angular/forms";
import { ActivityLogComponent } from './sessions/activity-log/activity-log.component';

import { AuthService } from "./auth/auth.service";
import { LoginComponent } from './auth/login/login.component';
import { RoutineConfigComponent } from './routines/routine-config/routine-config.component';

import { SETTINGS as AUTH_SETTINGS, USE_EMULATOR as USE_AUTH_EMULATOR } from '@angular/fire/compat/auth';
import { USE_EMULATOR as USE_DATABASE_EMULATOR } from '@angular/fire/compat/database';
import { USE_EMULATOR as USE_FIRESTORE_EMULATOR } from '@angular/fire/compat/firestore';
import { USE_EMULATOR as USE_FUNCTIONS_EMULATOR } from '@angular/fire/compat/functions';import { AngularFireModule } from "@angular/fire/compat";
import { AngularFireAuthModule } from '@angular/fire/compat/auth';
import { AngularFirestoreModule } from "@angular/fire/compat/firestore";

const firebaseConfig = {{myConfig}}

const environment = {
  useEmulators: true
}

@NgModule({
  declarations: [
    AppComponent,
    NavBarComponent,
    RoutineListComponent,
    SessionRunComponent,
    ActivityLogComponent,
    LoginComponent,
    RoutineConfigComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    LayoutModule,
    AppMaterialModule,
    FormsModule,
    // FirebaseModule
    AngularFireModule.initializeApp(firebaseConfig),
    AngularFirestoreModule,
    AngularFireAuthModule
  ],
  providers: [
    AuthService,
    { provide: USE_AUTH_EMULATOR, useValue: ['http://localhost', 9099] },
    // { provide: USE_DATABASE_EMULATOR, useValue: environment.useEmulators ? ['http://localhost', 9000] : undefined },
    { provide: USE_FIRESTORE_EMULATOR, useValue: ['http://localhost', 8080] },
    // { provide: USE_FUNCTIONS_EMULATOR, useValue: environment.useEmulators ? ['http://localhost', 5001] : undefined },
    // { provide: AUTH_SETTINGS, useValue: {
    //   host: 'localhost:8080',
    //   ssl: false
    // }}
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

And this is me trying to connect to the Auth:

import { Injectable } from '@angular/core';
import { AngularFireAuth } from "@angular/fire/compat/auth";
import { User } from "./models/user";

import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  user$: Observable<User>;

  constructor(private afAuth: AngularFireAuth) { 
    this.user$ = this.afAuth.user.pipe(
      map(user => {
        if (!user)
          return null;

        return {
          displayName: user.displayName,
          email: user.email,
          photoUrl: user.photoURL,
          uid: user.uid
        }
      })
    );
  }

  async signIn(email: string, password: string) {
    await this.afAuth.signInWithEmailAndPassword(email, password);
  }

  async signOut() {
    await this.afAuth.signOut();
  }

  async signUp(email: string, password: string) {
    await this.afAuth.createUserWithEmailAndPassword(email, password);
  }
}

Yet I always get this error: core.js:6486 ERROR Error: Uncaught (in promise): FirebaseError: Firebase: A network AuthError (such as timeout, interrupted connection or unreachable host) has occurred. (auth/network-request-failed). FirebaseError: Firebase: A network AuthError (such as timeout, interrupted connection or unreachable host) has occurred. (auth/network-request-failed). at createErrorInternal (index-f41a0691.js:473) at _fail (index-f41a0691.js:444) at index-f41a0691.js:981 at Generator.throw (<anonymous>) at asyncGeneratorStep (asyncToGenerator.js:3) at _throw (asyncToGenerator.js:29) at ZoneDelegate.invoke (zone.js:372) at Object.onInvoke (core.js:28680) at ZoneDelegate.invoke (zone.js:371) at Zone.run (zone.js:134) at resolvePromise (zone.js:1213) at resolvePromise (zone.js:1167) at zone.js:1279 at ZoneDelegate.invokeTask (zone.js:406) at Object.onInvokeTask (core.js:28667) at ZoneDelegate.invokeTask (zone.js:405) at Zone.runTask (zone.js:178) at drainMicroTaskQueue (zone.js:582) I could really use some help. I’ve been stuck for about 2 weeks on getting the emulator working

[jamesdaniels]

Seems to be outdated, that’s how it was in the prior version. Here’s all of them being called in the sample app https://github.com/angular/angularfire/blob/master/samples/compat/src/app/app.module.ts#L80

[jamesdaniels]

The value you’re passing to USE_AUTH_EMULATOR is in the incorrect format. It should include the port in the hostname string.