Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

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

Unanswered
MatthewDavidTravers asked this question in Q&A
Discussion options

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 NgModuleRef1ドル.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.

You must be logged in to vote

Replies: 1 comment

Comment options

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

You must be logged in to vote
0 replies
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Category
Q&A
Labels
None yet

AltStyle によって変換されたページ (->オリジナル) /