在环境中配置角度路由
我有一个带有路由和延迟加载模块的Angular 6应用程序。AppModule有一个路由配置，其中包含两个延迟加载的路由，假设是AModule和BModule。
我们为prod和dev配置了不同的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并不了解合并的路由配置。
有没有办法将多个路由阵列合并为一个有效的路由配置？
回答 2
Stack Overflow用户
发布于 2018-12-19 06:25:14
我发现使用“开发卫士”的延迟加载效果最好。
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“，所以我认为这是可以的。
注意：：确保导入默认环境文件。
Stack Overflow用户
发布于 2019-03-28 19:12:08
我们遇到了类似的问题，我们使用路由作为“类似环境”的常量来处理它。
这就是我们的app.routing.ts
import {appRoutes} from "../environments/general/approutes"; <----THAT'S IT
@NgModule({
imports: [
CommonModule,
BrowserModule,
RouterModule.forRoot(appRoutes, {useHash: true})
],
exports: [
],
})
export class AppRoutingModule { }环境下的通用文件夹存储了用于dev模式的环境常量和文件。
因此，我们将approutes.ts文件放在/environments/general/approutes下
..Omissis imports...
export const appRoutes: Routes =[
{
path: 'login', component: LoginComponent
},
{ path: '', component: FullPageLayoutComponent,
children: [
{ path: 'logged', loadChildren: '../../app/logged.module#LoggedModule' }
]
},
{ path: '', component: ComponentA,
children: [
{ path: 'pathA', loadChildren: '../../app/componentA.module#ComponentAModule' }
]
},
{
path: '**', component: NotFoundComponent
}
];然后，我们在/environments/prod/approutes下有一个不同的approutes.ts文件
..Omissis imports...
export const appRoutes: Routes =[
{
path: 'login', component: LoginComponent
},
{ path: '', component: FullPageLayoutComponent,
children: [
{ path: 'logged', loadChildren: '../../app/logged.module#LoggedModule' }
]
},
{ path: '', component: ComponentA,
children: [
{ path: 'pathB', loadChildren: '../../app/componentB.module#ComponentBModule' }
]
},
{
path: '**', component: NotFoundComponent
}
];显然，对于prod环境，您必须使用文件替换配置您的angular.json，如下所示：
"prod":{
"fileReplacements": [
{
"replace": "src/environments/general/environment.ts",
"with": "src/environments/prod/environment.ts"
}, //For sure you will have different stuff in your environment const in dev and prod mode
{
"replace": "src/environments/general/approutes.ts",
"with": "src/environments/prod/approutes.ts"
}
]
}会发生什么呢？
当使用prod模式启动时，文件替换将首先发生，然后您的app.routing.ts将导入approutes常量来产生路由和加载魔术，包括lazily module之类的东西。
通过这样做，您可以在不同的环境中拥有不同的路由和加载的模块。这种方法可以用来构建共享相同基础组件的不同应用程序，将它们作为单独的环境处理，所有这些都在一个项目中，我发现它非常有用
希望能有所帮助
https://stackoverflow.com/questions/51056704
复制相似问题
腾讯云开发者
