Angular v17中能否将Angular库定义为Native Federation联邦模块？

不是只有Angular应用才能作为Native Federation的远程模块，但Angular库默认的构建配置不满足Native Federation的运行时加载要求，这就是你遇到报错The project doesn't have a build or serve target in angular.json!的核心原因。以下是具体解决步骤：

1. 给库添加符合联邦要求的Build/Serve目标 #

Angular库默认的angular.json配置是针对npm发布的库产物，而非可被联邦加载的浏览器端ES模块。你需要手动添加或修改库的构建配置：

在angular.json的projects.your-library-name.architect节点下，添加如下配置：

"build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
    "outputPath": "dist/your-library-name",
    "index": "projects/your-library-name/src/index.html",
    "main": "projects/your-library-name/src/main.ts",
    "polyfills": ["zone.js"],
    "tsConfig": "projects/your-library-name/tsconfig.app.json",
    "assets": ["projects/your-library-name/src/assets"],
    "styles": ["projects/your-library-name/src/styles.css"],
    "scripts": [],
    "outputType": "esm",
    "optimization": false,
    "outputHashing": "none"
  }
},
"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "browserTarget": "your-library-name:build"
  }
}

• 用browser builder替代库默认的library builder，生成可在浏览器中加载的ES模块
• 确保main.ts存在并导出你的库模块（比如导入公共API模块并暴露）

2. 初始化Native Federation配置到库项目 #

运行以下命令给库添加联邦远程配置：

ng add @angular-architects/native-federation --project your-library-name --type remote

生成federation.config.js后，调整exposes字段指向你的库公共API：

module.exports = {
  name: 'your-library-name',
  exposes: {
    './YourLibModule': './projects/your-library-name/src/public-api.ts',
    './YourComponent': './projects/your-library-name/src/lib/your-component/your-component.component.ts',
    './YourService': './projects/your-library-name/src/lib/your-service/your-service.service.ts'
  },
  shared: {
    '@angular/core': { singleton: true, strictVersion: true },
    '@angular/common': { singleton: true, strictVersion: true },
    '@angular/router': { singleton: true, strictVersion: true }
  }
};

3. 调整库的代码适配联邦加载 #

• 确保服务和组件可独立导入：服务使用@Injectable({ providedIn: 'root' })或允许壳应用提供；组件属于NgModule或标记为独立组件
• 避免硬编码依赖应用上下文的内容（比如环境变量），改用注入方式传递

4. 验证构建与运行 #

• 构建库：ng build your-library-name，检查dist/your-library-name下是否生成remoteEntry.js和对应的ES模块文件
• 启动远程服务：ng serve your-library-name，然后在壳应用的federation.config.js中配置该远程的URL，尝试加载模块

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