Angular动态路由场景下组件Lazy Loading实现方案咨询

针对你这种运行时动态生成路由、需要懒加载组件的场景，以下几个可行方案思路供参考：

方案一：动态加载独立NgModule并注册路由 #

这是最贴合Angular路由体系的方案，核心是把每个可动态挂载的页面组件封装成独立的懒加载模块，运行时按需加载并整合到路由系统：

• 模块封装：给每个动态页面组件创建独立的NgModule（比如PageAModule），模块内定义基础路由配置（路径可暂用占位符，后续动态替换）。
• 运行时加载：当生成动态路由（如:sname/route/to/pageA）时，通过import()语法动态加载对应模块（比如import('./pages/page-a/page-a.module').then(m => m.PageAModule)）。
• 路由整合：拿到加载后的模块，提取其路由配置并修改路径为目标动态路径，再通过Router.resetConfig()或Router.config.push()将新路由添加到主路由表中。
• 构建保障：确保Angular构建时将这些模块打包为独立chunk，CLI会自动处理动态import()的拆分，无需额外配置（若有特殊需求可调整angular.json的构建参数）。

方案二：通用占位组件+动态加载组件类 #

如果不想为每个组件创建模块，可通过占位组件配合动态加载组件类实现懒加载：

• 占位组件：创建一个通用的DynamicPageHostComponent，负责接收组件类并通过ComponentFactoryResolver动态挂载组件。
• 路由配置：给所有动态路由注册这个占位组件，同时在路由data字段中存储组件的chunk标识（如组件名称、chunk路径）。
• 路由守卫触发加载：在CanActivate守卫中，根据路由data里的标识，用import()加载对应组件的chunk，拿到组件类后传递给占位组件，由占位组件完成挂载。
• 依赖处理：若组件需要注入依赖，需通过Injector将主应用的注入器传递给动态创建的组件实例。

方案三：预定义懒加载映射表+运行时匹配 #

如果动态组件的范围可控，可提前维护一个懒加载模块的映射表，运行时根据路由标识匹配加载：

• 映射表定义：创建一个包含所有可动态加载模块的映射对象，比如：

  const lazyModuleMap = {
    pageA: () => import('./pages/page-a/page-a.module').then(m => m.PageAModule),
    pageB: () => import('./pages/page-b/page-b.module').then(m => m.PageBModule)
  };
  

• 路由匹配：运行时解析动态路由的标识（比如从:sname/route/to/pageA中提取pageA），从映射表中获取对应的加载函数，加载模块后将其路由配置替换为动态路径并整合到主路由。
• 优势：实现简单，且能确保构建时所有懒加载模块都被正确拆分为独立chunk，避免遗漏。

关键注意事项 #

• 路由重置需保留原有路由：使用Router.resetConfig()时，要合并原有路由配置，避免覆盖静态路由，示例：router.resetConfig([...router.config, newDynamicRoute])。
• 错误处理：动态加载模块/组件时要捕获加载失败的异常，比如展示通用错误页面。
• 缓存优化：对已加载的模块/组件进行缓存，避免重复加载相同路由时再次请求chunk。

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