角2+：canLoadの使用

Question

私はcanLoad関数をルートで使用しようとしていますが、動作していないようです。

理由はわかりませんが、canActivateなどで使用できないかもしれませんが、わからないので、誰かがここにいると思いました。

コードは、私がこれを取得AOTコンパイルを提供する際に、実行されます。

chunk {admin.module} admin.module.chunk.js, admin.module.chunk.js.map() 28 kB {main} {pilotage.module} {suiviprod.module} 
chunk {inline} inline.bundle.js, inline.bundle.js.map (inline) 5.83 kB [entry] 
chunk {main} main.bundle.js, main.bundle.js.map (main) 3.5 MB {vendor} [initial] 
chunk {pilotage.module} pilotage.module.chunk.js, pilotage.module.chunk.js.map() 17.2 kB {admin.module} {main} {suiviprod.module} 
chunk {styles} styles.bundle.js, styles.bundle.js.map (styles) 267 kB {inline} [initial] 
chunk {suiviprod.module} suiviprod.module.chunk.js, suiviprod.module.chunk.js.map() 20.4 kB {admin.module} {main} {pilotage.module} 
chunk {vendor} vendor.bundle.js, vendor.bundle.js.map (vendor) 5.52 MB [initial] 

しかし、私は、モジュールに行くとき、コンソールログは行われません。ここ

は私のルートのコードである：

logged.module（メインルーティング、app.moduleとしてそれを参照）

export const loggedRoutes: Routes = [ 
    { 
    path: 'logged', component: LoggedComponent, canActivate: [AuthGuardService], canActivateChild: [AuthGuardService], children: [ 
     { path: 'profile', component: ProfileComponent, children: [] }, 
     ...adminRoutes, 
     ...mainRoutes, 
     ...pilotageRoutes, 
     ...suiviProdRoutes, 
     { path: 'admin', loadChildren: 'app/logged/admin/admin.module#AdminModule', canLoad: [AdminGuardService] }, 
     { path: 'pilotage', loadChildren: 'app/logged/pilotage/pilotage.module#PilotageModule', canLoad: [AdminGuardService] }, 
     { path: 'suiviprod', loadChildren: 'app/logged/suiviprod/suiviprod.module#SuiviprodModule', canLoad: [AdminGuardService] }, 
     { path: '', redirectTo: '/logged/main/error', pathMatch: 'prefix' } 
    ] 
    }, 
]; 

admin.module（suiviprodと水先案内であります同じ、ちょうど異なるルートで&コンポーネント）

authguard.service（ローカルストレージがトークンを有する場合canActivateがtrueを返す）

@Injectable() 
export class AdminGuardService implements CanActivate, CanActivateChild, CanLoad { 
    jwtHelper: JwtHelper = new JwtHelper(); 
    constructor(private router: Router, private alerter: AlertService) { } 
    // tslint:disable-next-line:max-line-length 
    canActivate(route?: ActivatedRouteSnapshot, state?: RouterStateSnapshot): boolean { return canActivate(route, state, this, [global.roles.admin]); } 
    canActivateChild(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean { return this.canActivate(route, state); } 
    canLoad(route: Route): boolean { console.log('coucou'); return canActivate(null, null, this, [global.roles.admin]); } 
} 

EDIT（canActivateとcanActivateChildに適しています）ガードによって使用canActivate関数：

export function canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot, caller: any, userRoles: string[]): boolean { 
    try { 
    // Get the token 
    let token = localStorage.getItem('jwt'); 

    // If no token found, not connected 
    if (!token) { 
     caller.alerter.error(`Vous n'êtes pas connecté`); 
     caller.router.navigate(['/login']); 
     return false; 
    } 

    // Try to get roles. If it fails, not a valid token. 
    let decodedToken = caller.jwtHelper.decodeToken(token); 
    let roles: Array<String> = decodedToken.roles.split(','); 

    // return true if any role is found 
    let found = false; 
    for (let role of userRoles) { 
     if (roles.indexOf(role) >= 0) { found = true; } 
    } 
    if (found) { return true; } 

    // Role not found => Unauthorized 
    caller.alerter.error(`Autorisation manquante`); 
    caller.router.navigate(['/logged/main']); 
    return false; 

    } catch (ex) { 
    // Catch the JWT errors 
    caller.alerter.error(`La session utilisateur est corrompue`); 
    caller.router.navigate(['/login']); 
    return false; 
    } 
} 

Answer 1

メインのloggedRoutes constに遅延ロードされたモジュールのサブルートを定義したくありません。モジュールへのエントリポイントを定義して、モジュールが内部ルーティングを処理するようにしてください。モジュールのサブルートをloggedRoutesに定義すると、実際にルート アプリモジュールの一部であると宣言しています。

canLoadは遅延ロードされたモジュールでのみ使用でき、これらのモジュールは独自のルーティングを制御する必要があります。ルートモジュールはこれを制御することができません。なぜなら、遅延ロードされたモジュールのコンポーネントについて知っており、遅延ロードされないからです。

あなたloggedRoutesからこれを削除します。それは怠惰なロードされたモジュールの一部ではないとして

...adminRoutes, 
...pilotageRoutes, 
...suiviProdRoutes, 

...mainRoutesは大丈夫です。

と確実にあなたの怠惰なロードされたモジュールは、そのルートが登録されています：

@NgModule({ 
    imports: [ RouterModule.forChild(adminRoutes) ] 
}) 
export class AdminModule { } 

怠惰なロードされたモジュールを使用すると、トップレベルですべてのルートを登録しているとして、あなたのアプリが気にしない、内部的に自分自身のルーティングを処理したいです遅延ロードされたモジュールについては、管理ルートが表示され、通常のルートなので、そこをナビゲートします。しかし、AOTコンパイラにはあなたのloadChildrenが表示され、あなたのコードをチャンクアップしますが、あなたのアプリを含むメインのチャンクには、遅延ロードされるはずの余分なモジュールがすべて含まれます。

また、あなたのadminRoutesから最初のルートの名前をドロップする必要があります。

path: 'admin', component: AdminComponent... 

は、ルートセグメントadminがすでにモジュールが中adminとして登録されて提供される

path: '', component: AdminComponent... 

なった場合メインloggedRoutes。

Answer 2

canActivateに問題がある可能性があります。ここにメソッド本体があります：canActivateという別の関数が呼び出されています。あれは何でしょう？