Angular集成多独立子应用的Shell微前端实现咨询

针对你描述的「多Angular应用独立持有依赖、接入壳应用后路由逻辑和独立运行完全一致」的需求，直接用 Webpack Module Federation（模块联邦） 实现就行，是Angular生态下适配成本最低、兼容性最好的方案，不需要引入第三方微前端运行时，完全保留各应用独立开发、独立部署的能力。

• 壳应用Shell、四个微应用A/B/C/D尽量保持Angular主版本一致（比如统一用Angular 16/17/18），避免核心API版本差导致的兼容问题
• 所有应用保留独立的node_modules目录、独立的构建配置，不需要提前抽离公共依赖，原有独立开发、独立运行的流程完全不变
• 提前给每个微应用分配全局唯一的路由前缀：比如A对应/app-a、B对应/app-b、C对应/app-c、D对应/app-d，从根路径上避免Shell和微应用、微应用之间的路由冲突

微应用（A/B/C/D）改造 #

四个微应用的改造逻辑完全一致，不需要改业务代码：

• 安装Angular生态适配的模块联邦开发依赖：npm i @angular-architects/module-federation -D
• 在微应用根目录执行初始化命令：ng g @angular-architects/module-federation:init --project 你的微应用项目名 --port 微应用独立运行的端口，比如A应用本地跑4201端口就填4201，命令会自动修改angular.json构建配置、生成模块联邦配置文件，不需要手动写webpack规则
• 调整微应用的路由基路径：在应用入口的app-routing.module.ts里配置根路由的baseHref为之前分配的前缀（比如A应用设为/app-a/），保证微应用内部所有路由跳转、静态资源加载、路由参数解析都在自身前缀下运行，和独立运行时的路由逻辑完全对齐
• 修改根目录自动生成的webpack.config.js配置，把微应用的根模块（AppModule）作为远程入口暴露出去，比如A应用暴露规则写exposes: { './AppModule': './src/app/app.module.ts' }即可
• 改造完直接执行ng serve就能独立运行，和改造前的开发体验没有任何区别，内部路由、守卫、懒加载逻辑不需要做任何调整

Shell壳应用改造 #

• 同样执行模块联邦初始化命令，指定Shell自身的运行端口（比如4200），自动生成构建配置
• 修改Shell的模块联邦配置，在remotes字段下声明四个微应用的远程入口地址：本地开发时填各微应用本地服务的remoteEntry.js地址，生产环境换成微应用部署后的静态资源访问地址即可
• 正常开发Shell的全局头部、底部组件，在主布局的内容区域放置<router-outlet></router-outlet>作为微应用的挂载点
• 配置Shell路由规则：给每个微应用的前缀加通配符路由（比如path: 'app-a/**'），路由匹配时动态拉取对应微应用暴露的AppModule，挂载到内容区的路由出口上。这里必须加**通配符，把前缀下的所有子路由完全交给微应用自身的路由系统处理，Shell不要做任何拦截
• 做路由状态同步：监听浏览器地址变化，匹配到对应微应用前缀时先加载微应用模块，加载完成后把当前路径传给微应用的路由实例初始化，保证微应用内部的router.navigate跳转、路由守卫、嵌套路由、参数传递逻辑和独立运行时完全一致，不需要做额外适配

• 依赖隔离：默认配置下各应用的依赖完全从自己的node_modules加载，不会互相影响。如果要优化首屏加载速度，可以按需把无状态的公共工具包配置为共享依赖，不要强制把Angular核心、RxJS这类带版本兼容要求的包设为全局单例，避免版本冲突
• 样式隔离：给每个微应用的根组件加唯一属性标识，或者开启Angular自带的ViewEncapsulation.ShadowDom视图封装，避免Shell和微应用、微应用之间的样式互相污染
• 部署逻辑：所有应用独立构建、独立部署，Shell不需要把微应用的产物打包进自己的构建包，只需要更新配置里的微应用remoteEntry.js地址就能完成微应用的版本更新
• 构建兼容：如果用Angular 17+的esbuild构建体系，现有模块联邦适配包已经原生支持esbuild，不需要切回webpack构建，构建速度和原生Angular应用没有差异

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