Angular v16模块联邦迁移v18原生联邦时共享库404问题

架构老林

2026-6-19

问题

将现有Angular v16模块联邦应用迁移至Angular v18及基于esbuild的原生联邦插件，该应用包含十几个托管在壳应用中的微前端。已完成宿主应用的更新并成功运行原生联邦，同时对第一个微前端进行了基础配置修改，使其能作为远程应用在壳应用中加载。但尝试加载该微前端时，异步请求无法找到angular core、angular common等共享库，出现404错误。为何这些基础库未被共享？

微前端的federation.manifest.json配置如下：

const { withNativeFederation, shareAll } = require('@angular-architects/native-federation/config');

module.exports = withNativeFederation({

  name: 'managerFrontend',

  exposes: {
    './Component': './src/app/manager/manager.component.ts'
  },

  shared: {
    ...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }),
  },

  skip: [
    'rxjs/ajax',
    'rxjs/fetch',
    'rxjs/testing',
    'rxjs/webSocket'
  ]
  
});

原因及解决方法

出现这类问题通常由以下几种情况导致，对应解决步骤如下：

宿主应用未同步配置共享规则
微前端配置了shareAll不代表宿主会自动同步共享逻辑，必须确保宿主应用的federation.manifest.json也包含相同的共享配置，且singleton、strictVersion等参数和微前端保持一致，否则核心库的共享约定不匹配，会导致微前端尝试自行加载依赖引发404。

esbuild解析逻辑导致shareAll遗漏核心库
Angular v18切换到esbuild后，模块解析逻辑和webpack存在差异，shareAll可能无法自动识别Angular核心包的导出路径，导致共享清单中缺失这些依赖。可以手动指定核心库的共享规则，补充到配置中：

shared: {
  '@angular/core': { singleton: true, strictVersion: true, requiredVersion: 'auto' },
  '@angular/common': { singleton: true, strictVersion: true, requiredVersion: 'auto' },
  '@angular/router': { singleton: true, strictVersion: true, requiredVersion: 'auto' },
  // 按需添加其他核心库
  ...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }),
},

手动指定能确保核心库被明确纳入共享清单，避免esbuild解析遗漏。

版本不匹配触发严格校验
requiredVersion: 'auto'会自动读取当前项目的依赖版本，如果宿主和微前端的Angular版本存在细微差异（比如18.0.0 vs 18.1.0），strictVersion: true会直接拒绝共享，微前端会尝试加载自身的依赖副本，若构建时未打包这些库就会出现404。可以暂时将strictVersion改为false，或者统一所有应用的Angular依赖版本。
原生联邦插件版本不兼容
检查@angular-architects/native-federation的版本，若版本过低可能无法适配Angular 18的esbuild构建流程，导致共享配置未生效。更新插件到适配Angular 18的最新版本后，重新构建宿主和微前端，再检查dist目录下的federation.manifest.json，确认shared字段中已包含Angular核心库的条目。

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