Angular中Module Federation结合Web Components与manifest加载微前端报错

1. 确保Manifest文件结构正确 #

你的mf.manifest.json必须以remoteName作为键，对应的值是该微前端的remoteEntry.js地址，示例：

{
  "mfe1": "http://localhost:4201/remoteEntry.js"
}

这里的"mfe1"必须和你路由配置里的remoteName完全一致，否则会触发“Manifest does not contain mfe1”错误。

2. Shell应用的InitFederation配置 #

在Shell的main.ts中，确保initFederation正确指向Manifest文件路径：

import { initFederation } from '@angular-architects/module-federation';

initFederation({
  manifest: '/mf.manifest.json' // 路径需正确，保证能成功加载该文件
})
.catch(err => console.error('Manifest加载失败:', err))
.then(() => import('./bootstrap'))
.catch(err => console.error('Bootstrap加载失败:', err));

3. 路由配置的正确语法（加载Web Component） #

使用WebComponentWrapper组件时，路由data中的配置要和Manifest、微前端的暴露模块严格对应，示例：

import { Routes } from '@angular/router';
import { WebComponentWrapper } from '@angular-architects/module-federation-tools';

export const routes: Routes = [
  // 其他路由...
  {
    path: 'mfe1',
    component: WebComponentWrapper,
    data: {
      type: 'manifest',
      remoteName: 'mfe1', // 必须与Manifest中的键完全匹配
      exposedModule: './web-component', // 对应微前端暴露的模块路径
      elementName: 'mfe1-element' // 微前端定义的Web Component标签名
    }
  }
];

4. 关键匹配项检查 #

• 微前端的federation.config.js中，需正确暴露对应模块：

  module.exports = {
    name: 'mfe1',
    exposes: {
      './web-component': './src/bootstrap.web-component.ts' // 需与路由的exposedModule匹配
    },
    // 其他配置...
  };
  

• 微前端的bootstrap.web-component.ts中，需正确定义Web Component标签名：

  import { createCustomElement } from '@angular/elements';
  import { Mfe1Component } from './app/mfe1/mfe1.component';
  import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
  import { AppModule } from './app/app.module';
  
  platformBrowserDynamic().bootstrapModule(AppModule)
    .then((moduleRef) => {
      const Mfe1Element = createCustomElement(Mfe1Component, { injector: moduleRef.injector });
      customElements.define('mfe1-element', Mfe1Element); // 需与路由的elementName匹配
    })
    .catch(err => console.error(err));
  

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