Need help with AngularFireAuthGuard

[phong764119]

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 {}

[google-oss-bot]

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

[phong764119]

found solution used AuthGuard in '@angular/fire/auth-guard'

PS: please update the document and examples, it took me all day to figure it out

[buhaenko]

@phong764119 Thank you. Yea, it is not clearly a point to connect AuthGuard after angularfire upgrade.

[333pehr]

@phong764119 thank you so much for the solution, I'm a junior developer and reading the outdated documentation confused me

[Jonesxxl]

I get this error using the AngularFireAuthGuard with Angular v16.

ERROR Error: Uncaught (in promise): TypeError: Class constructor AuthGuardModule cannot be invoked without 'new' TypeError: Class constructor AuthGuardModule cannot be invoked without 'new' at router.mjs:3339:52 at R3Injector.runInContext (core.mjs:9274:20) at router.mjs:3339:33 at Observable._subscribe (defer.js:5:19) at Observable._trySubscribe (Observable.js:37:25) at Observable.js:31:30 at errorContext (errorContext.js:19:9) at Observable.subscribe (Observable.js:22:21) at take.js:10:20 at OperatorSubscriber. (lift.js:10:28) at resolvePromise (zone.js:1193:31) at resolvePromise (zone.js:1147:17) at zone.js:1260:17 at _ZoneDelegate.invokeTask (zone.js:402:31) at core.mjs:27127:55 at AsyncStackTaggingZoneSpec.onInvokeTask (core.mjs:27127:36) at _ZoneDelegate.invokeTask (zone.js:401:60) at Object.onInvokeTask (core.mjs:27437:33) at _ZoneDelegate.invokeTask (zone.js:401:60) at Zone.runTask (zone.js:173:47) handleError @ core.mjs:10920 next @ core.mjs:28216 next @ Subscriber.js:91 _next @ Subscriber.js:60 next @ Subscriber.js:31 (anonymous) @ Subject.js:34 errorContext @ errorContext.js:19 next @ Subject.js:27 emit @ core.mjs:23216 (anonymous) @ core.mjs:27476 invoke @ zone.js:368 run @ zone.js:129 runOutsideAngular @ core.mjs:27349 onHandleError @ core.mjs:27476 handleError @ zone.js:372 runGuarded @ zone.js:142 api.microtaskDrainDone @ zone.js:1054 drainMicroTaskQueue @ zone.js:588 Promise.then (async) nativeScheduleMicroTask @ zone.js:557 scheduleMicroTask @ zone.js:568 scheduleTask @ zone.js:392 scheduleTask @ zone.js:216 scheduleMicroTask @ zone.js:236 scheduleResolveOrReject @ zone.js:1247 then @ zone.js:1442 bootstrapModule @ core.mjs:28256 4913 @ main.ts:6 webpack_require @ bootstrap:19 webpack_exec @ main.ts:7 (anonymous) @ main.ts:7 webpack_require.O @ chunk loaded:23 (anonymous) @ main.ts:7 webpackJsonpCallback @ jsonp chunk loading:34 (anonymous) @ main.js:2 Show 29 more frames Show less