在环境中配置 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` },
];

对于产品，我只需使用变量prodRoutes进行路由配置。效果很好。

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

有没有办法将多个路由阵列合并到单个工作路由配置中？

Answer 1

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

开发-guard.service.ts

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

应用程序路由.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 { }

应用程序模块.ts

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

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

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

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