ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(AuthModule)[AuthService -> AuthService -> AngularFirestore -> InjectionToken

[ashikjs]

Angular: 13.0.3

Firebase: 9.4.0

AngularFire: 7.2.0

After upgrade angularfire 6 to 7 i got error

ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(AuthModule)[AuthService -> AuthService -> AngularFirestore -> InjectionToken angularfire2.app.options -> InjectionToken angularfire2.app.options -> InjectionToken angularfire2.app.options]

simple if i can it any component constructor

private firebaseAuth: AngularFireAuth, or

private angularFirestore: AngularFirestore,

[google-oss-bot]

This issue does not seem to follow the issue template. Make sure you provide all the required information.

[fkolar]

I see this pretty chaotic. The samples are so out of date and one cannot really follow them. I am getting the same errors.

I was able to initialize my module like this, and I try to stay our of compact/ package as it gives tons of errors.

import {initializeApp, provideFirebaseApp} from '@angular/fire/app';
import {connectFirestoreEmulator, getFirestore, provideFirestore} from '@angular/fire/firestore';
import {connectStorageEmulator, getStorage, provideStorage} from '@angular/fire/storage';
import {Auth, connectAuthEmulator, getAuth, provideAuth} from '@angular/fire/auth';


provideAuth(() => {
      const auth = getAuth();
      if (environment.useEmulators) {
        connectAuthEmulator(auth, 'http://localhost:9099', {disableWarnings: true});
      }
      auth.useDeviceLanguage();
      setPersistence(auth, indexedDBLocalPersistence);
      return auth;
    }),

I am not really sure which API or which documentation should I follow

https://github.com/angular/angularfire/blob/master/site/src/auth/route-guards.md or https://github.com/angular/angularfire/blob/master/docs/auth/router-guards.md

If I use the one from /site/ then it is also out of sync with latest code as this import is invalid.

import { AngularFireAuthGuard } from '@angular/fire/auth-guard';

[DMezhenskyi]

Same here! I use a config generated by @angular/fire schematic:

  imports: [
    //....
    provideFirebaseApp(() => initializeApp(environment.firebase)),
    provideAuth(() => getAuth()),
    provideFirestore(() => getFirestore()),
  ],

I get the same error

[fkolar]

as For teh AuthGuard, I had copy the class code to my local class to make it work. Due the to export and canActivate signture problems.

[blaiseAI]

Same here! I use a config generated by @angular/fire schematic:

  imports: [
    //....
    provideFirebaseApp(() => initializeApp(environment.firebase)),
    provideAuth(() => getAuth()),
    provideFirestore(() => getFirestore()),
  ],

I get the same error

For compat imports you need to import the 'old' modules. In your case: AngularFireModule.initializeApp(environment.firebase).

[PJozeph]

same here

[cashco-bsebagabo]

You need to import the old module as a work around, "AngularFireModule.initializeApp(environment.firebase)"

[PJozeph]

you need to declare the providers :

@NgModule({
  declarations: [
    LoginComponent
  ],
  imports: [
    CommonModule,
    AuthRoutingModule,
    provideFirebaseApp(() => initializeApp(environment.firebase)),
    provideAuth(() => getAuth()),
  ],
  providers : [
    AuthService
  ]
})
export class AuthModule { }

although my AuthService has the following meta data

@Injectable({
  providedIn: 'root'
})

I dont know why its is not working

[nayfin]

I had similar but different null injector error: core.mjs:6485 ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(... ) -> FirestoreService -> ka -> ka -> ka. This was from importing Firestore from firebase instead of angular/fire. Created an issue here to help other find. It was kind of stupid mistake but easy to make when letting IDE make imports, and really hard to debug. Hope this saves someone else some lost hours.

[mystiquewolf]

Also got the error. Pretty new to Angular so don't know how it happened, but why is this issue even existing? Are the schematics broken/buggy?

[JessicaMulein]

I'm having a similar issue, but probably PEBKAC in some way. https://github.com/BrightChain/quri-dev/runs/7417287755?check_suite_focus=true#step:7:161

[simonbarbascu]

Hi! This works for me. I put this in app.module.ts

import { FIREBASE_OPTIONS } from '@angular/fire/compat';

@NgModule({ ... providers: [ { provide: FIREBASE_OPTIONS, useValue: environment.firebaseConfig } ], })

[Milly00]

Hi, I had same problem, I solved adding AngularFireModule.initializeApp(environment.firebaseConfig) into imports of AppModule

import { AngularFireModule } from '@angular/fire/compat'; import { environment } from 'src/environments/environment';

@NgModule({ declarations: [AppComponent], imports: [ AppRoutingModule, BrowserModule, AngularFireModule.initializeApp(environment.firebaseConfig), ], providers: [...], bootstrap: [AppComponent], })

[qaderHaddad]

Hi, I had same problem, I solved adding AngularFireModule.initializeApp(environment.firebaseConfig) into imports of AppModule

import { AngularFireModule } from '@angular/fire/compat'; import { environment } from 'src/environments/environment';

@NgModule({ declarations: [AppComponent], imports: [ AppRoutingModule, BrowserModule, AngularFireModule.initializeApp(environment.firebaseConfig), ], providers: [...], bootstrap: [AppComponent], })

This worked beautifully, thanks!

[ruthmazango]

I am having the same problem and the answers provided above leave me with a red line under firebaseConfig.

error is saying 'Property 'firebaseConfig' does not exist on type '{ production: boolean; }'.'

[Milly00]

Hi @ruthmazango, You have the firebaseConfig in environment.prod.ts ? Check the name with which you added the firebase configuration. In my case, I have it as: export const environment = { .... firebaseConfig: **Your config of firebase** .... } The same configuration that you have in environment.ts must be in environment.prod.ts

I hope it helps!

[ruthmazango]

thanks, it worked now

[laladiaz]

Hi! This works for me. I put this in app.module.ts

import { FIREBASE_OPTIONS } from '@angular/fire/compat';

@NgModule({ ... providers: [ { provide: FIREBASE_OPTIONS, useValue: environment.firebaseConfig } ], })

This works!! thanks!!! <3

[kisamoto]

I had this error when I was using the v9 syntax to set up firebase but had an import using the compat directories.

If you are having the same issue I recommend the following:

If you are using the V9 sytanx (provideFirebaseApp(() => initializeApp(environment.firebase)), in your app.module.ts) then search your codebase and look for any imports using compat. In my case it was the auth guard which was importing from compat/auth-guard. Remove the compat so the imports become import { canActivate, redirectLoggedInTo } from '@angular/fire/auth-guard';

Do not mix V9 and compat!