如何在Angular单页应用中加载自定义微前端元素

排查步骤与解决方法 #

1. 配置Angular允许自定义元素 #

Angular默认会把未知HTML标签视为错误，需在壳应用根模块中添加CUSTOM_ELEMENTS_SCHEMA：

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@NgModule({
  // ...其他模块配置
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }

如果是独立组件模式，要在bootstrapApplication中配置schemas：

import { bootstrapApplication, SCHEMA } from '@angular/platform-browser';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

bootstrapApplication(AppComponent, {
  providers: [
    { provide: SCHEMA, useValue: CUSTOM_ELEMENTS_SCHEMA }
  ]
});

2. 确保脚本加载时机匹配应用渲染 #

ng serve启动的SPA会优先渲染页面，可能脚本还未加载完成就尝试渲染自定义元素。可以通过APP_INITIALIZER在应用初始化前加载微前端脚本：

import { APP_INITIALIZER } from '@angular/core';

export function loadMfeScript() {
  return () => new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.src = 'http://localhost:8082/mfe1.js';
    script.onload = resolve;
    script.onerror = reject;
    document.body.appendChild(script);
  });
}

@NgModule({
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: loadMfeScript,
      multi: true
    }
  ]
})
export class AppModule { }

3. 检查跨域与脚本注册问题 #

打开浏览器控制台（F12）查看错误：

• 若出现CORS错误：在微前端的angular.json中添加跨域允许配置：

  "serve": {
    "options": {
      "host": "0.0.0.0",
      "disableHostCheck": true,
      "headers": {
        "Access-Control-Allow-Origin": "*"
      }
    }
  }
  

• 若出现自定义元素未注册错误：确认微前端脚本中正确执行了customElements.define，且避免Angular Zone干扰，可在微前端中用NgZone.runOutsideAngular注册：

  import { NgZone } from '@angular/core';
  
  constructor(private ngZone: NgZone) {}
  
  ngOnInit() {
    this.ngZone.runOutsideAngular(() => {
      customElements.define('overview-cards-element', OverviewCardsElement);
    });
  }
  

1. Web Components（自定义元素） #

即你当前采用的方案，将每个微前端打包为独立的自定义元素，壳应用通过静态或动态脚本加载。注意：

• 微前端打包时使用ng build --output-hashing none --single-bundle true减少冗余，避免重复加载Angular框架
• 多微前端共享依赖时，可将公共依赖（如@angular/core）抽离为单独脚本，壳应用优先加载

2. iframe嵌入 #

将每个微前端部署为独立应用，壳应用通过<iframe>嵌入，实现完全隔离：

<iframe src="http://localhost:8082" frameborder="0" width="100%" height="600"></iframe>

• 壳应用与微前端的通信可通过postMessage实现，提前约定消息格式
• 可通过iframe的sandbox属性增强样式与操作隔离的安全性

3. SystemJS动态加载模块 #

将微前端打包为UMD格式，壳应用用SystemJS加载模块并挂载：

1. 微前端打包配置：ng build --output-format umd
2. 壳应用引入SystemJS后动态加载：

import * as SystemJS from 'systemjs';

// 配置SystemJS映射
SystemJS.config({
  map: {
    'mfe1': 'http://localhost:8082/main.js'
  }
});

// 加载并挂载模块
SystemJS.import('mfe1').then(module => {
  const rootElement = document.getElementById('mfe-container');
  module.bootstrap(rootElement);
});

4. Angular动态组件加载（同框架专用） #

若所有微前端均为Angular应用，可将微前端打包为NgModule，壳应用动态加载并编译：

import { HttpClient } from '@angular/common/http';
import { Compiler, Injector } from '@angular/core';

async function loadMfeModule(http: HttpClient, compiler: Compiler, injector: Injector) {
  const moduleUrl = 'http://localhost:8082/mfe-module.js';
  const moduleText = await http.get(moduleUrl, { responseType: 'text' });
  const module = await compiler.compileModuleAsync(moduleText);
  const moduleRef = module.create(injector);
  const componentFactory = moduleRef.componentFactoryResolver.resolveComponentFactory(MfeComponent);
  const container = document.getElementById('mfe-container');
  componentFactory.create(injector, [], container);
}

该方法需启用Angular Ivy编译，且需处理依赖共享问题。

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