Angular(5) - 延迟加载和 canActivate 守卫 - StaticInjectorError

Question

所以，我们有一个相当大的应用程序，我们开始着手优化....其中一项优化是延迟加载某些部分....

所以我们有演示页面，其中包含我们不想在任何地方使用的示例用法，但在开发环境中...

所以延迟加载那部分非常容易...

在我们的应用程序路由模块中，我们有

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

进入演示路线后出现此错误：

ERROR Error: Uncaught (in promise): Error: StaticInjectorError[DevOnlyGuard]:
StaticInjectorError[DevOnlyGuard]: NullInjectorError: No provider for DevOnlyGuard! Error: StaticInjectorError[DevOnlyGuard]: ....

即使我将 Guard 添加到我的 app.module 中的提供者列表中喜欢

providers: [
    ...
    DevOnlyGuard,
];

有什么想法吗？

Answer 1

从 canActivate: ['DevOnlyGuard']

中删除单引号

下面是我们应该如何使用canActivate:

方法一：

  @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 {}

Angular(5) - 延迟加载和 canActivate 守卫 - StaticInjectorError

Angular(5) - lazy loading and canActivate guard - StaticInjectorError

router

lazy-loading

angular