如何在Angular库中实现基于应用配置的可配置路由？

要实现库内部通过应用环境配置路由，核心是利用Angular的ModuleWithProviders和静态forRoot方法传递配置并动态生成路由，具体实现如下：

修改库的路由模块 #

把路由定义移到forRoot静态方法中，接收应用传入的环境配置，动态生成路由并返回完整的模块配置：

import { NgModule, ModuleWithProviders } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LibraryComponent } from './library.component';

@NgModule({
  exports: [RouterModule]
})
export class LibraryRoutingModule {
  // 接收环境配置，返回带路由的模块配置
  public static forRoot(environment: any): ModuleWithProviders<LibraryRoutingModule> {
    const routes: Routes = [
      { path: environment.some_path, component: LibraryComponent }
    ];

    return {
      ngModule: LibraryRoutingModule,
      imports: [RouterModule.forRoot(routes)]
    };
  }
}

修改应用模块的导入方式 #

在应用模块中导入库路由模块时，调用forRoot并传入自身的environment：

import { LibraryRoutingModule } from 'library';
import { environment } from '../environments/environment';

@NgModule({
  imports: [
    LibraryRoutingModule.forRoot(environment)
  ]
})
export class AppModule { }

原理说明 #

Angular模块的imports数组在编译阶段执行，无法直接访问注入的依赖，但静态forRoot方法可以在模块导入时接收外部参数，动态生成路由配置并通过ModuleWithProviders返回完整的模块配置，完美解决了路由配置依赖外部环境的问题。

内容的提问来源于stack exchange，提问作者MoBoo