AngularFire router guards redirectUnauthorizedTo not working with ng build --prod

[anisabboud]

Version info

Angular: 8.0.1
Firebase: 6.2.0
AngularFire: 5.2.1
tsconfig.json "target": "es5"

Steps to set up and reproduce

• Setup a Firebase project with auth router guards https://github.com/angular/angularfire2/blob/master/docs/auth/router-guards.md and https://github.com/RaphaelJenni/FirebaseUI-Angular
• Use ...canActivate(redirectUnauthorizedTo(['login'])) like below:

const appRoutes: Routes = [
  {
    path: '',
    ...canActivate(redirectUnauthorizedTo(['login'])),
    children: [
      { path: 'calendar', component: CalendarComponent },
      { path: '',
        redirectTo: 'calendar',
        pathMatch: 'full'
      },
    ],
  },
  {
    path: 'login',
    component: LoginComponent,
    ...canActivate(redirectLoggedInTo([''])),
  },
  { path: '**',
    redirectTo: '/',
    pathMatch: 'full'
  },
];

• Everything works great with ng serve or ng build, but with ng build --prod, the router guard redirectUnauthorizedTo(['login']) stops working. I.e., the user isn't redirected to /login, and can access the protected routes without logging in.

Debug output

There are no errors in the console. The redirection just doesn't occur.
Using RouterModule.forRoot(appRoutes, { enableTracing: true }), confirms that.

With ng build (redirection to /login works):

With ng build --prod:

Notice that logging the AngularFireAuth.user observable (in yellow) shows that in the first case, it evaluated to null before the routing ended so the guard worked properly.
However, in the second case, the routing was performed before the auth state was evaluated (the observable hasn't emitted), and the guard didn't wait for it so it didn't work.

Expected behavior

Route guards should work with ng build --prod.

Actual behavior

Route guards work with ng build but not with ng build --prod.

[JGSolutions]

For me I can't even get close as i get these errors. Then again I am lazy loading my modules

ERROR Error: Uncaught (in promise): NullInjectorError: StaticInjectorError(AppModule)[AngularFireAuthGuard]: StaticInjectorError(Platform: core)[AngularFireAuthGuard]: NullInjectorError: No provider for AngularFireAuthGuard! NullInjectorError: StaticInjectorError(AppModule)[AngularFireAuthGuard]: StaticInjectorError(Platform: core)[AngularFireAuthGuard]: NullInjectorError: No provider for AngularFireAuthGuard!

[Segfaultd]

@JGSolutions just add it in the providers of your app.module.ts, like a normal guard

[JGSolutions]

@Tyldar Thanks it works

[rickbeumers]

For me I can't even get close as i get these errors. Then again I am lazy loading my modules

ERROR Error: Uncaught (in promise): NullInjectorError: StaticInjectorError(AppModule)[AngularFireAuthGuard]: StaticInjectorError(Platform: core)[AngularFireAuthGuard]: NullInjectorError: No provider for AngularFireAuthGuard! NullInjectorError: StaticInjectorError(AppModule)[AngularFireAuthGuard]: StaticInjectorError(Platform: core)[AngularFireAuthGuard]: NullInjectorError: No provider for AngularFireAuthGuard!

You should add AngularFireAuthGuardModule to your imports for the correct importing.

@anisabboud I came here with the same issue, seems like something is not working when minified.

[javanese84]

Same issue here, works like it should with ng serve and after ng build --prod all routes are accessible. Is there a solution for this?

[ajheunis]

Yup I have the same issue as @anisabboud. Works perfectly in other circumstances, but on a production build the AuthGuards don't run. Also tried with a custom guard with the same result. Thank you.

[sasa95]

Same issue here.

[javanese84]

Is there any news about this? This is currently a showstopper in my project :-(

[helloejsulit]

Still waiting for a fix for this.

[d-c-mate]

I have the same problem, I just want a auth guard like :

// app-routing.module.ts
import { AngularFireAuthGuard, loggedIn, redirectLoggedInTo } from '@angular/fire/auth-guard';

const redirectLoggedInToHome = redirectLoggedInTo(['/']);

const routes: Routes = [
  { path: '', component: HomeComponent },
  // { path: 'search', component: SearchComponent },
  // { path: 'search:query', component: SearchComponent },
  { path: 'login', component: LoginComponent, canActivate: [AngularFireAuthGuard], data: { authGuardPipe: redirectLoggedInToHome }},
  { path: 'register', component: RegisterComponent, canActivate: [AngularFireAuthGuard], data: { authGuardPipe: redirectLoggedInToHome }},
  { path: 'my-account', component: AccountComponent, canActivate: [AngularFireAuthGuard], data: { authGuardPipe: loggedIn }},
  { path: 'events', component: EventsComponent },`
];

but have this when i'm logged in and I try to go in '/login' for example :

EDIT

I just confused loggedIn() and redirectUnauthorizedTo()

// app-routing.module.ts
const redirectLoggedInToHome = () => redirectLoggedInTo(['/']);
const redirectUnauthorizedToHome = () => redirectUnauthorizedTo(['/']);

// app-routing.module.ts
  { path: 'login', component: LoginComponent, canActivate: [AngularFireAuthGuard], data: { authGuardPipe: redirectLoggedInToHome }},
  { path: 'register', component: RegisterComponent, canActivate: [AngularFireAuthGuard], data: { authGuardPipe: redirectLoggedInToHome }},
  { path: 'my-account', component: AccountComponent, canActivate: [AngularFireAuthGuard], data: { authGuardPipe: redirectUnauthorizedToHome }},

Don't forget to add AngularFireAuthGuard in app providers and imports

// app.module.ts
imports: [
    AngularFireModule.initializeApp(environment.firebaseConfig),
    AngularFirestoreModule,
    AngularFireAuthModule,
    AngularFireStorageModule,
],
providers: [
    AuthService,
    AngularFireAuthGuard,
  ],

[devinshoemaker]

The solution posted in issue #2099 works for me in production and non-production mode.

#2099 (comment)

[helloejsulit]

I can confirm the solution in #2099 works for me too. Thanks for sharing @devinshoemaker!

[epicquestgames]

Is there gonna be proper fix ?

[jzarzeckis]

Waiting for a proper fix too.