Description
Angular:
12.x.x
Firebase:
9.4.1
AngularFire:
7.2.0
I just flow to the document and got this error when using AngularFireAuthGuard
core.js:6498 ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(AppModule)[AngularFireAuthGuard -> AngularFireAuth -> InjectionToken angularfire2.app.options -> InjectionToken angularfire2.app.options -> InjectionToken angularfire2.app.options]:
NullInjectorError: No provider for InjectionToken angularfire2.app.options!
NullInjectorError: R3InjectorError(AppModule)[AngularFireAuthGuard -> 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:11120)
at R3Injector.get (core.js:11287)
at R3Injector.get (core.js:11287)
at R3Injector.get (core.js:11287)
at injectInjectorOnly (core.js:4770)
at Module.ɵɵinject (core.js:4774)
at Object.AngularFireAuth_Factory [as factory] (angular-fire-compat-auth.js:125)
at R3Injector.hydrate (core.js:11457)
at R3Injector.get (core.js:11276)
at injectInjectorOnly (core.js:4770)
at resolvePromise (zone.js:1213)
at resolvePromise (zone.js:1167)
at zone.js:1279
at ZoneDelegate.invokeTask (zone.js:406)
at Object.onInvokeTask (core.js:28679)
at ZoneDelegate.invokeTask (zone.js:405)
at Zone.runTask (zone.js:178)
at drainMicroTaskQueue (zone.js:582)
app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { config } from '../environments/environment';
import { initializeApp, provideFirebaseApp } from '@angular/fire/app';
import { provideFirestore, getFirestore } from '@angular/fire/firestore';
import { provideAuth, getAuth } from '@angular/fire/auth';
import { HomeComponent } from './components/home/home.component';
import { LoginComponent } from './components/login/login.component';
@NgModule({
declarations: [AppComponent, HomeComponent, LoginComponent],
imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
provideFirebaseApp(() => initializeApp(config)),
provideFirestore(() => getFirestore()),
provideAuth(() => getAuth()),
],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AngularFireAuthGuard } from '@angular/fire/compat/auth-guard';
import { HomeComponent } from './components/home/home.component';
import { LoginComponent } from './components/login/login.component';
const routes: Routes = [
{ path: '', component: HomeComponent, canActivate: [AngularFireAuthGuard] },
{ path: 'login', component: LoginComponent },
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
})
export class AppRoutingModule {}