web-dev-qa-db-ja.com

Angular（5）-遅延読み込みとcanActivateガード-StaticInjectorError

それで、私たちはかなり大きなアプリを持っていて、最適化に取り組み始めました...最適化の1つは、いくつかの部分を遅延ロードすることでした...

だから私たちはどこにも欲しくない、DEV環境ではなく、使用例の全負荷を備えたデモページを持っています...

その部分の遅延読み込みは非常に簡単でした...

アプリルーティングモジュールには

const routes: Routes = [
    ...
    {path: 'design', canActivate: ['DevOnlyGuard'], loadChildren: 'app/pages/demo/demo.module#DemoPagesModule'},
    ...
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

つまり、canActivateルートがないと、すべてが正常に機能し、デモルートが遅延して読み込まれます...

さて、これをcanActivateをガードに追加すると、次のようになります。

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, CanActivateChild } from '@angular/router';
import { environment } from 'environments/environment';

@Injectable()
export class DevOnlyGuard implements  CanActivate, CanActivateChild {
  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    return (environment.envName === 'dev');
  }

  canActivateChild(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    return this.canActivate(route, state);
  }
}

デモルートに到達すると、このエラーが発生します。

エラーエラー：キャッチされていません（約束されています）：エラー：StaticInjectorError [DevOnlyGuard]：
StaticInjectorError [DevOnlyGuard]：NullInjectorError：DevOnlyGuardのプロバイダーがありません！エラー：StaticInjectorError [DevOnlyGuard]：..。

guardをapp.moduleのプロバイダーのリストに追加したとしても

providers: [
    ...
    DevOnlyGuard,
];

何か案は？

angularlazy-loadingrouter
9
DS_web_developer

canActivate: ['DevOnlyGuard']から一重引用符を削除する

以下はcanActivateの使用方法です。

方法1：

  @Injectable()
    class CanActivateTeam implements CanActivate {
      constructor(private permissions: Permissions, private currentUser: UserToken) {}

      canActivate(
        route: ActivatedRouteSnapshot,
        state: RouterStateSnapshot
      ): Observable<boolean>|Promise<boolean>|boolean {
        return this.permissions.canActivate(this.currentUser, route.params.id);
      }
    }

    @NgModule({
      imports: [
        RouterModule.forRoot([
          {
            path: 'team/:id',
            component: TeamCmp,
            canActivate: [CanActivateTeam]
          }
        ])
      ],
      providers: [CanActivateTeam, UserToken, Permissions]
    })
    class AppModule {}

方法2（単一引用符付き...）：

@NgModule({
  imports: [
    RouterModule.forRoot([
      {
        path: 'team/:id',
        component: TeamCmp,
        canActivate: ['canActivateTeam']
      }
    ])
  ],
  providers: [
    {
      provide: 'canActivateTeam',
      useValue: (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => true
    }
  ]
})
class AppModule {}
5
Haifeng Zhang