redirectTo не работает при использовании canActivate guard

Question

Недвижимость redirectTo не работает в моем приложении Angular 2. У меня есть следующие маршруты в моем app.routing.ts:

const routes: Routes = [ 
    { path: '', redirectTo: '/page/1', pathMatch: 'full' }, 
    { path: 'page', loadChildren: 'app/modules/page/page.module#PageModule' } 
] 

export const routing = RouterModule.forRoot(routes); 

Тогда в моем page.routing.ts я следующее:

const pageRoutes: Routes = [ 
    { path: ':id', component: PageComponent, canActivate: [LoginGuard] } 
]; 

export const pageRouting = RouterModule.forChild(pageRoutes); 

Каждый раз, когда я получить доступ к домашней странице он отображается LoginComponent на секунду, затем он исчезает. Однако он должен перенаправить на PageComponent.

Почему это не так? Почему загружается LoginComponent (даже если это только на короткую секунду), если пользователь уже вошел в систему?

Вот мой LoginGuard:

@Injectable() 
export class LoginGuard implements CanActivate { 

    constructor(private af: AngularFire, private router: Router) {} 

    canActivate(): Observable<boolean> { 
    return this.af.auth.map(auth => { 
     if (auth === null) { 
     this.router.navigate(['/login']); 
     return false; 
     } else { 
     return true; 
     } 
    }).first(); 
    } 

} 

EDIT:. Временно, я изменил LoginComponent для перенаправления на PageComponent, если пользователь вошел в систему я до сих пор интересно, хотя, почему redirectTo не работает.

Answer 1

Я не знаю точно, почему это происходит, но я верю, что если вы проверите LoginGuard перед загрузкой PageModule, он будет работать.

app.routing.ts

const routes: Routes = [ 
    { path: '', redirectTo: '/page/1', pathMatch: 'full' }, 
    { 
    path: 'page', 
    // Call the guard before the module is loaded 
    canLoad: [ LoginGuard ] 
    loadChildren: 'app/modules/page/page.module#PageModule' 
    } 
] 

export const routing = RouterModule.forRoot(routes); 

LoginGuard

@Injectable() 
export class LoginGuard implements CanActivate, CanLoad { 

    constructor(private af: AngularFire, private router: Router) {} 

    // Add this method to validade the canLoad 
    canLoad(route: Route): Observable<boolean> { 
    return this.canActivate(); 
    } 

    canActivate(): Observable<boolean> { 
    return this.af.auth.map(auth => { 
     if (auth === null) { 
     this.router.navigate(['/login']); 
     return false; 
     } else { 
     return true; 
     } 
    }).first(); 
    } 

}