Angular MFE项目集成SSR执行ng add命令时遇集合文件解析错误

问题根源 #

@nguniversal/common包并不包含Angular CLI所需的schematics集合文件（collection.json），Angular 15及以上版本中，官方推荐的SSR添加命令是使用@nguniversal/express-engine而非@nguniversal/common，这就是你在全新项目和MF项目中都报错的核心原因。

解决方案步骤 #

1. 清理错误依赖
   如果已经安装了@nguniversal/common，先执行卸载：

   npm uninstall @nguniversal/common
   

2. 使用正确包添加SSR
   替换yourProject为实际项目名称，执行官方标准的SSR添加命令：

   ng add @nguniversal/express-engine --project yourProject
   

   该命令会自动生成server.ts、webpack.server.config.js等SSR核心文件，并配置好dev:ssr、build:ssr等npm脚本。

3. 适配Module Federation微前端架构

   • 恢复之前临时禁用的异步引导逻辑
   • 在server.ts顶部引入Module Federation的服务端支持：

     import { setupServer } from '@angular-architects/module-federation/server';
     setupServer();
     

   • 修改webpack.server.config.js，添加Module Federation服务端插件配置，确保服务端能正确加载远程模块：

     const { ModuleFederationServerPlugin } = require('@angular-architects/module-federation/webpack');
     
     module.exports = {
       // ... 保留原有配置
       plugins: [
         new ModuleFederationServerPlugin({
           name: 'yourHostAppName',
           remotes: {
             // 按你的实际远程模块配置填写，例如：
             // mfeAuth: 'mfeAuth@http://localhost:3002/remoteEntry.js'
           }
         })
       ]
     };
     

4. 验证SSR运行
   执行开发环境SSR启动命令，确认服务端渲染正常工作：

   npm run dev:ssr
   

内容的提问来源于stack exchange，提问作者s.alhaj