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

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.

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 24
Comments: 22

Most upvoted comments

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?

+10

javanese84 on Jun 20, 2019

Same issue here.

sasa95 on Jun 22, 2019

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

https://github.com/angular/angularfire2/issues/2099#issuecomment-503403712

devinshoemaker on Jul 3, 2019

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.

ajheunis on Jun 22, 2019

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.

rickbeumers on Jun 19, 2019

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

Segfaultd on Jun 16, 2019

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 : dczqdzq

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,
  ],

d-c-mate on Jul 1, 2019

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

helloejsulit on Jul 3, 2019

Despite adding AngularFireAuthGuard and AngularFireAuthGuardModule to app.module.ts, I am encountering the NullInjectorError but it complains there isn’t a provider for Router, even though I am importing RouterModule in there as well!

errors.ts:30 ERROR Error: Uncaught (in promise): NullInjectorError: StaticInjectorError(AppModule)[AngularFireAuthGuard -> Router]: 
  StaticInjectorError(Platform: core)[AngularFireAuthGuard -> Router]: 
    NullInjectorError: No provider for Router!
NullInjectorError: StaticInjectorError(AppModule)[AngularFireAuthGuard -> Router]: 
  StaticInjectorError(Platform: core)[AngularFireAuthGuard -> Router]: 
    NullInjectorError: No provider for Router!

I have demonstrated this on a StackBlitz Project: https://stackblitz.com/edit/angular-scftvu

benbabics on Jan 15, 2020

Same problem here. the solution in #2099 works for me but how can I make it works for redirectLoggedInTo?

n3nikita on Aug 10, 2019

Is there gonna be proper fix ?

epicquestgames on Jul 14, 2019