Question

如何仅在开发模式下加载某些路由。在启用生产模式的情况下进行构建时，我希望禁用这些路由。

有人对如何完成此功能有什么好的建议吗？例如，如果处于“开发模式”，请隐藏下面的route2组件。

    const routes: Routes = [
  {
    path: '',
    component: AdminComponent,
    canActivate: [AuthGuard],
    runGuardsAndResolvers: 'always',
    data: { allowedRoles: ['Role1','Role2'] },
    children: [
      {
        path: '',
        redirectTo: 'dashboard/main',
        pathMatch: 'full'
      },
      {
        path: 'route2',
        loadChildren: './theme/route2/route2.module#route2Module'
      }
    ]
   }

Answer 1

由于您使用的是Lazy Modules，因此请在canActivate内使用其他guard（可以在其中检查实际环境）。

Answer 2

根据您的Angular Router代码：

const routes: Routes = [
  {
    path: '',
    component: AdminComponent,
    canActivate: [AuthGuard],
    runGuardsAndResolvers: 'always',
    data: { allowedRoles: ['Role1','Role2'] },
    children: [
      {
        path: '',
        redirectTo: 'dashboard/main',
        pathMatch: 'full'
      },
      {
        path: 'route2',
        loadChildren: './theme/route2/route2.module#route2Module'
      }
    ]
   }

您正在尝试使用路由器实现延迟加载，并且还使特定模块只能在开发环境中加载（如果我的理解是正确的话）。为此Angular Router提供了名为 CanLoad 的 Guard 。当您不想为了延迟加载而将特定模块加载到路由时，就会使用CanLoad。是否将CanActivate用于组件级防护，但在这种情况下，它将模块加载到浏览器。

因此以这种方式更改代码：

const routes: Routes = [
  {
    path: '',
    component: AdminComponent,
    canActivate: [AuthGuard],
    runGuardsAndResolvers: 'always',
    data: { allowedRoles: ['Role1','Role2'] },
    children: [
      {
        path: '',
        redirectTo: 'dashboard/main',
        pathMatch: 'full'
      },
      {
        path: 'route2',
        loadChildren: './theme/route2/route2.module#route2Module', // Don't want to load this module
        canLoad: [DevEnvGuard]
      }
    ]
   }


@Injectable()
class DevEnvGuard implements CanLoad {
  constructor() {}

  canLoad(route: Route, segments: UrlSegment[]): Observable<boolean>|Promise<boolean>|boolean {
    return !environment.prod; // if prod = false it will load module
  }
}

我认为这是方法。如果我缺少任何内容，请在评论中告诉我。

Answer 3

由于它是一个数组，因此您可以在environment.ts文件中根据环境设置该数组。

//environment.ts
export const environment = {
  production: false
};

//environment.prod.ts
export const environment = {
  production: true
};

导入时，只需使用environment.ts文件，因为fileRepleacements中的angular.json可以为您方便地进行管理。

...
"configurations": {
  "production": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.prod.ts"
...

所以您的实现可能类似于：

const routes = [...production route set];
if (!environment.production) {
    routes.push(...dev route set);
}

Angular如何仅在开发模式下创建特定路线

3 个答案: