Angular微前端使用Web Component报NG0400错误求助

错误原因 #

Error: NG0400: A platform with a different configuration has been created. Please destroy it first 是因为远程应用加载时，Angular平台被重复初始化，且远程模块的平台配置与Shell应用的现有平台冲突。当使用@angular/elements打包Web Component时，远程模块若未处理平台复用逻辑，就会触发该冲突。

解决方案 #

1. 远程应用中处理Angular平台复用 #

修改远程应用的Web Component入口文件（比如main.element.ts或web-components模块），添加平台检查逻辑，确保只初始化一次平台：

import { createCustomElement } from '@angular/elements';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

// 检查是否已存在Angular平台，不存在则创建
let angularPlatform = platformBrowserDynamic.getPlatform();
if (!angularPlatform) {
  angularPlatform = platformBrowserDynamic();
}

angularPlatform.bootstrapModule(AppModule)
  .then(moduleRef => {
    // 注册自定义Web Component
    const Mfe2Root = createCustomElement(moduleRef.instance.AppComponent, { 
      injector: moduleRef.injector 
    });
    customElements.define('mfe2-root', Mfe2Root);
  })
  .catch(err => console.error('Web Component注册失败:', err));

2. 优化Shell应用的WrapperComponent #

调整WrapperComponent代码，避免重复创建元素，并确保远程模块加载逻辑简洁：

import { Component, ElementRef, inject, OnInit } from '@angular/core';
import { loadRemoteModule } from '@angular-architects/module-federation';

export interface WrapperConfig {
    remoteName: string;
    exposedModule: string;
    elementName: string;
}

export const initWrapperConfig: WrapperConfig = {
    remoteName: '',
    exposedModule: '',
    elementName: '',
}

@Component({
  selector: 'app-wrapper',
  template: ''
})
export class WrapperComponent implements OnInit {
  private elm = inject(ElementRef);
  @Input() config = initWrapperConfig;

  async ngOnInit() {
    const { elementName } = this.config;

    // 加载远程模块
    await loadRemoteModule({
      remoteName:'remote', 
      exposedModule:'./web-components', 
      remoteEntry: "http://localhost:4202/remoteEntry.js"
    });

    // 检查元素是否已存在，避免重复插入
    if (!this.elm.nativeElement.querySelector(elementName)) {
      const webComponent = document.createElement(elementName);
      this.elm.nativeElement.appendChild(webComponent);
    }
  }
}

3. 额外注意事项 #

• 确保Shell应用与远程应用的Angular版本完全一致（均为14.2.0），版本差异也可能引发平台配置冲突。
• 远程应用打包Web Component时，需在angular.json中配置专属的构建目标，确保输出的是独立的Web Component资源。

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