NullInjectorError: No provider for InjectionToken angularfire2.app.options!

[MatthewDavidTravers]

Hi, I've just tried setting up a new firebase angular project using angular/fire module and I'm encountering an error. I set up the project using the info in the docs and so far the only things i have done are to create the angular project and then run.

ng add @angular/fire

After going through the process I'm now trying to sign-up a user with the following inside the app component:

constructor(
    private fireAuth: AngularFireAuth
  ) {
    let email = "";
    let password = "";

    this.fireAuth.createUserWithEmailAndPassword(email, password)
      .then(signupResult => {
        console.log(signupResult);
      })
      .catch(err => {
        console.log(err);
      })
  }

my app module looks like this:

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ServiceWorkerModule } from '@angular/service-worker';
import { environment } from '../environments/environment';
import { initializeApp,provideFirebaseApp } from '@angular/fire/app';
import { provideAnalytics,getAnalytics, ScreenTrackingService,UserTrackingService } from '@angular/fire/analytics';
import { provideAuth,getAuth } from '@angular/fire/auth';
import { provideDatabase,getDatabase } from '@angular/fire/database';
import { provideFirestore,getFirestore } from '@angular/fire/firestore';
import { provideFunctions,getFunctions } from '@angular/fire/functions';
import { provideMessaging,getMessaging } from '@angular/fire/messaging';
import { providePerformance,getPerformance } from '@angular/fire/performance';
import { provideRemoteConfig,getRemoteConfig } from '@angular/fire/remote-config';
import { provideStorage,getStorage } from '@angular/fire/storage';
import { 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 { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { SignUpComponent } from './sign-up/sign-up.component';

@NgModule({
  declarations: [
    AppComponent,
    SignUpComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ServiceWorkerModule.register('ngsw-worker.js', {
      enabled: environment.production,
      // Register the ServiceWorker as soon as the app is stable
      // or after 30 seconds (whichever comes first).
      registrationStrategy: 'registerWhenStable:30000'
    }),
    provideFirebaseApp(() => initializeApp(environment.firebase)),
    provideAnalytics(() => getAnalytics()),
    provideAuth(() => getAuth()),
    provideDatabase(() => getDatabase()),
    provideFirestore(() => getFirestore()),
    provideFunctions(() => getFunctions()),
    provideMessaging(() => getMessaging()),
    providePerformance(() => getPerformance()),
    provideRemoteConfig(() => getRemoteConfig()),
    provideStorage(() => getStorage()),
    BrowserAnimationsModule
  ],
  providers: [
    ScreenTrackingService,
    UserTrackingService,
    { provide: USE_AUTH_EMULATOR, useValue: environment.useEmulators ? ['localhost', 9099] : undefined },
    { provide: USE_DATABASE_EMULATOR, useValue: environment.useEmulators ? ['localhost', 9000] : undefined },
    { provide: USE_FIRESTORE_EMULATOR, useValue: environment.useEmulators ? ['localhost', 8080] : undefined },
    { provide: USE_FUNCTIONS_EMULATOR, useValue: environment.useEmulators ? ['localhost', 5001] : undefined },
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

but this is returning the following error:

core.js:6479 ERROR NullInjectorError: R3InjectorError(AppModule)[AngularFireAuth -> InjectionToken angularfire2.app.options -> InjectionToken angularfire2.app.options -> InjectionToken angularfire2.app.options]: 
  NullInjectorError: No provider for InjectionToken angularfire2.app.options!
    at NullInjector.get (core.js:11100)
    at R3Injector.get (core.js:11267)
    at R3Injector.get (core.js:11267)
    at R3Injector.get (core.js:11267)
    at injectInjectorOnly (core.js:4751)
    at Module.ɵɵinject (core.js:4755)
    at Object.AngularFireAuth_Factory [as factory] (angular-fire-compat-auth.js:126)
    at R3Injector.hydrate (core.js:11437)
    at R3Injector.get (core.js:11256)
    at NgModuleRef$1.get (core.js:25365)

my versions are:

"@angular/cdk": "^12.2.11",
"@angular/fire": "^7.1.1",
"firebase": "^9.1.0",

Not sure if this is the correct place to post but any help would be appreciated, thanks.

[hakimio]

You are using AngularFireAuth from angularfire v6/compat. You have to use Auth instead in v7. Check out this example.