Angular应用如何在运行时动态添加路由与附加类库

完全可以实现，不需要在构建阶段预定义所有路由，核心是利用Angular Router提供的运行时路由操作API，配合UMD格式的外部类库动态加载能力，就能达到不重新构建主应用、按需新增功能的效果。

实现步骤 #

• 应用初始化阶段读取外部配置
  借助APP_INITIALIZER令牌，在Angular应用启动完成前发起请求，读取托管在静态服务上的JSON配置文件，配置中需要声明每个动态功能的路由路径、对应类库的访问地址、导出模块/组件的名称。示例配置结构：

// dynamic-routes.config.json
{
  "routes": [
    {
      "path": "report-center",
      "bundlePath": "/external-bundles/report-center.umd.js",
      "exportName": "ReportCenterModule",
      "needAuth": true
    }
  ]
}

• 封装外部类库动态加载方法
  独立功能类库需要提前打包为UMD格式，构建时将@angular/core、@angular/common、@angular/router等Angular公共依赖标记为外部依赖，不要打进功能包中，避免出现多Angular实例冲突。运行时通过动态创建script标签的方式加载UMD包，从全局window对象上获取导出的模块/组件引用，示例加载工具方法：

// 缓存已加载的模块
const loadedModules = new Map<string, Type<any>>();

function loadExternalBundle(bundleUrl: string, exportName: string): Promise<Type<any>> {
  if (loadedModules.has(exportName)) {
    return Promise.resolve(loadedModules.get(exportName)!);
  }
  return new Promise((resolve, reject) => {
    const scriptEl = document.createElement('script');
    scriptEl.src = bundleUrl;
    scriptEl.onload = () => {
      const moduleRef = (window as any)[exportName];
      loadedModules.set(exportName, moduleRef);
      resolve(moduleRef);
    };
    scriptEl.onerror = () => reject(new Error(`Failed to load bundle: ${bundleUrl}`));
    document.body.appendChild(scriptEl);
  });
}

• 运行时注册动态路由
  拿到配置后，调用Angular Router的resetConfig方法，将动态路由追加到现有路由配置中。注意懒加载逻辑要写在loadChildren（NgModule场景）或loadComponent（Standalone组件场景）回调中，等用户实际访问对应路径时才触发类库加载，不要在注册路由阶段就提前加载包。示例注册逻辑：

// 注入router服务
const currentRoutes = router.config;
// 提取通配符路由，后续放到配置末尾避免拦截动态路由
const wildcardIndex = currentRoutes.findIndex(route => route.path === '**');
const fixedRoutes = wildcardIndex >=0 ? currentRoutes.slice(0, wildcardIndex) : currentRoutes;
const tailRoutes = wildcardIndex >=0 ? currentRoutes.slice(wildcardIndex) : [];

// 生成动态路由配置
const dynamicRoutes = config.routes
  .filter(route => !route.needAuth || userHasPermission(route.path)) // 可结合权限过滤
  .map(route => ({
    path: route.path,
    loadChildren: () => loadExternalBundle(route.bundlePath, route.exportName)
      .then(mod => mod[route.exportName])
  }));

// 重置路由配置
router.resetConfig([
  ...fixedRoutes,
  ...dynamicRoutes,
  ...tailRoutes
]);

优化与注意事项 #

• 动态功能类库必须和主应用使用相同大版本的Angular依赖，否则会出现依赖注入、生命周期相关的运行时错误
• Angular 14+版本优先使用Standalone组件作为动态功能的载体，不需要额外封装NgModule，加载和注册逻辑更简洁
• 可以给动态路由增加加载兜底逻辑：类库加载过程中显示全局加载提示，加载失败时跳转到统一的功能不可用提示页
• 已加载的类库做好内存缓存，避免用户重复访问同一路由时重复创建script标签加载资源
• 生产部署时，动态功能包可以和主应用分开托管，只需要更新JSON配置和对应功能包，不需要重新构建发布主应用即可上线新功能

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