angular - 在环境中配置 Angular 路由

Question

我有一个带有路由和延迟加载模块的 Angular 6 应用程序。AppModule 有一个包含两个延迟加载路由的路由配置，比方说 AModule 和 BModule。

我们为生产和开发配置了不同的 angular-cli 环境。

在 BModule 的开发过程中，我希望 BModule 在我们的开发服务器上作为路由可用，但在我们的生产服务器上不可用。

因此，我们使用 angular-cli 环境 dev 构建应用程序的开发版本，而使用环境 prod 构建生产版本。

所以现在和将来通常会有一个 prod 的路由配置和一个 dev 的路由配置，这是 prod 配置的超集。

所以我所做的是创建了两个路由配置:

export const prodRoutes: Routes = [
  { path: 'a-module', loadChildren: `app/a-module/a.module#AModule` },
];

export const devRoutes: Routes = [
  { path: 'b-module', loadChildren: `app/b-module/b.module#BModule` },
];

对于 prod，我只是使用变量 prodRoutes 作为我的路由配置。这很好用。

对于开发配置，我将路由设置为 [...devRoutes, ...prodRoutes]。那不能正常工作。看来 Angular 不理解合并路由配置。

有没有办法将多个路由数组合并到一个工作路由配置中？

Answer 1

我发现使用“Development Guard”进行延迟加载效果最好。

development-guard.service.ts

@Injectable({
  providedIn: "root",
})
export class DevelopmentGuard implements CanActivate {
  canActivate() {
    return !environment.production;
  }
}

app-routing.module.ts

const routes = [
  { 
    path: "dev-page",
    canActivate: [DevelopmentGuard], 
    loadChildren: "app/development-only/development-only.module#DevelopmentOnlyModule" 
  },
  {
    path: "", 
    loadChildren: "app/production/production.module#ProductionModule" 
  },
]

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

app.module.ts

const developmentModules = []
if (!environment.production) {
  developmentModules.push(DevelopmentOnlyModule)
}

@NgModule({
  imports: [
    AppRoutingModule,
    ...developmentModules,
  ],
})

据我所知，这不会影响我的 main.js 文件的大小。我想由于守卫，增加幅度很小。但是生产环境永远不会加载“DevelopmentOnlyModule”，所以我认为没关系。

注意:确保导入默认环境文件。