在环境中配置Angular Routes

Question

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

我们为prod和dev配置了不同的angular-cli环境。

在开发BModule期间，我希望BModule可以在我们的开发服务器上作为路由使用，但不能在我们的生产服务器上使用。

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

因此，现在和将来通常会为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进行路由配置。 这很好。

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

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

Answer 1

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

发展-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”，所以我认为没关系。

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

Answer 2

我们遇到了类似的问题，我们使用路由作为“类似环境”的常量来处理它。

这是我们的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 { }

environemnt下的常规文件夹存储将用于开发模式的环境常量和文件。

所以我们在/ environments / general / 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: '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环境配置yor angular.json和filereplacements：

        "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常量以产生路由和加载魔法，包括懒惰模块的东西。

通过这样做，您可能在不同的环境中具有不同的路由和加载的模块。 这个approch可用于构建共享相同基本组件的不同应用程序，将它们作为separe环境处理，所有这些都在一个项目中，我发现它非常有用

希望它有所帮助