canActivateガードを使用しているときにリダイレクトが機能しない

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：は一時的に、私は、ユーザーがログインしている場合PageComponentにリダイレクトするLoginComponentを変更し、私はまだだろう、しかし、なぜredirectTo機能していません。

Answer 1

なぜこれが起こっているのか正確にはわかりませんが、PageModuleがロードされる前にLoginGuardをチェックすればうまくいくと思います。

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(); 
    } 

}