-
Notifications
You must be signed in to change notification settings - Fork 2.2k
NullInjectorError: No provider for InjectionToken angularfire2.app.options! #3029
-
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.
Beta Was this translation helpful? Give feedback.
All reactions
Replies: 1 comment
-
You are using AngularFireAuth
from angularfire v6/compat. You have to use Auth
instead in v7. Check out this example.
Beta Was this translation helpful? Give feedback.