Question

我有一个带有路由和延迟加载模块的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` },
];

对于产品，我只使用变量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”，因此我认为这是可以的。

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

Answer 2

在Angular项目中，我们也有两种类型的路由（ROUTES_DEV，ROUTES_PROD），我们在下面这样做：

注意：我不确定它是否可以与延迟加载的Moule一起正常使用，因为我们暂时还没有。因此，应该进行测试，但我认为它不适用于延迟加载的模块。

// app.component.ts

// Init dev routes if environment is development
public ngOnInit(): void {
  if (!this.environment.production) {
    this.initDevRoutes();
  }
}

// Dynamically add routes to router.
public initDevRoutes(): void {
  const routerConfig = this.router['config']; // get config from Router
  // Merge dev and existing routes
  const newRouterConfig = [
    ...ROUTES_DEV,
    ...routerConfig
  ];
  // Resets the configuration used for navigation and generating links.
  this.router.resetConfig(newRouterConfig);
}

Answer 3

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

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

显然，您必须使用以下内容为产品环境配置带有文件替换的yor 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"
            }
          ]
        }

会发生什么？

当以产品模式启动时，将首先发生文件替换，然后您的app.routing.ts将导入approutes常量以产生路由和加载魔术，包括惰性模块内容。

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

希望有帮助

在环境中配置角向路线

3 个答案: