title: Get "Component auth has not been registered yet" when using Firebase authentication from Angular app
body: <p>I'm trying to add authentication to my Angular/Firebase app. I got it working no-problem in a small demo app, but when I try to add it to my real Angular application, I get &quot;Component auth has not been registered yet&quot; console errors in the browser.</p>
  <p>To narrow the issue down, I copied this minimal authentication component from the Firebase &quot;angularfire&quot; samples ():</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { Component, OnInit, OnDestroy, PLATFORM_ID } from '@angular/core';
  import { AngularFireAuth } from '@angular/fire/compat/auth';
  import firebase from '@firebase/app-compat';
  import { Subscription } from 'rxjs';
  import { map } from 'rxjs/operators';
  import { trace } from '@angular/fire/compat/performance';
  import { Inject } from '@angular/core';
  import { isPlatformServer } from '@angular/common';
  
  @Component({
    selector: 'app-auth',
    template: `
      &lt;p&gt;
        Auth!
        {{ (auth.user | async)?.uid | json }}
        {{ (auth.credential | async)?.additionalUserInfo?.isNewUser | json }}
        &lt;button (click)="login()" *ngIf="showLoginButton"&gt;Log in with Google&lt;/button&gt;
        &lt;button (click)="loginAnonymously()" *ngIf="showLoginButton"&gt;Log in anonymously&lt;/button&gt;
        &lt;button (click)="logout()" *ngIf="showLogoutButton"&gt;Log out&lt;/button&gt;
      &lt;/p&gt;
    `,
    styles: []
  })
  export class AuthComponent implements OnInit, OnDestroy {
  
    private readonly userDisposable: Subscription | undefined;
  
    showLoginButton = false;
    showLogoutButton = false;
  
    constructor(public readonly auth: AngularFireAuth, @Inject(PLATFORM_ID) platformId: object) {
      if (!isPlatformServer(platformId)) {
        this.userDisposable = this.auth.authState.pipe(
          trace('auth'),
          map(u =&gt; !!u)
        ).subscribe(isLoggedIn =&gt; {
          this.showLoginButton = !isLoggedIn;
          this.showLogoutButton = isLoggedIn;
        });
      }
    }
  
    ngOnInit(): void { }
  
    ngOnDestroy(): void {
      if (this.userDisposable) {
        this.userDisposable.unsubscribe();
      }
    }
  
    async login() {
      const user = await this.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider());
      // TODO sign into offline app
    }
  
    async loginAnonymously() {
      const user = await this.auth.signInAnonymously();
      // TODO sign into offline app
    }
  
    logout() {
      this.auth.signOut();
      // TODO sign out of offline app
    }
  
  }</code></pre>
  </div>
  </div>
  </p>
  <p>The imports section of my app.module.ts looks like this (edited):</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>  imports: [
      AppRoutingModule,
      ...
      AngularFireModule.initializeApp(environment.firebase),
      provideFirebaseApp(() =&gt; initializeApp(environment.firebase)),
      provideAnalytics(() =&gt; getAnalytics()),
      provideAuth(() =&gt; getAuth()),
      provideFirestore(() =&gt; getFirestore()),
      provideFunctions(() =&gt; getFunctions()),
    ],</code></pre>
  </div>
  </div>
  </p>
  <p>The console error that I'm seeing looks like this:</p>
  <blockquote>
  <p>zone.js:182 Uncaught Error: Component auth has not been registered yet
  at Provider.initialize (index.esm2017.js:232:19)
  at new Auth (index.esm2017.js:651:35)
  at Component.instance.INTERNAL.registerComponent.<em>firebase_component__WEBPACK_IMPORTED_MODULE_3</em>_.Component.setServiceProps.ActionCodeInfo.Operation.EMAIL_SIGNIN [as instanceFactory] (index.esm2017.js:969:16)
  at Provider.getOrInitializeService (index.esm2017.js:290:39)
  at Provider.getImmediate (index.esm2017.js:128:29)
  at FirebaseAppImpl._getService (index.esm2017.js:83:1)
  at FirebaseAppImpl.firebaseAppImpl. [as auth] (index.esm2017.js:291:1)
  at angular-fire-compat-auth.js:59:51
  at ZoneDelegate.invoke (zone.js:372:1)
  at Zone.run (zone.js:134:1)</p>
  </blockquote>
  <p>I've examined the Authentication settings of my app in the Firebase console, and they're identical for what I have set in my demo app, which works.</p>
  <p>Any suggestions?</p>