如何将Angular应用作为微件嵌入其他技术栈的HTML页面？

1. 调整Angular项目构建配置 #

要让Angular生成可全局引入的脚本包，需修改angular.json的构建配置，指定打包格式与单文件输出：

"projects": {
  "your-project-name": {
    "architect": {
      "build": {
        "builder": "@angular-devkit/build-angular:browser",
        "options": {
          "outputPath": "dist/widget",
          "main": "src/main.widget.ts", // 新建微件专属入口文件
          "tsConfig": "tsconfig.widget.json", // 对应专属TS配置
          "outputHashing": "none", // 禁用文件名哈希，方便外部引用
          "singleBundle": true, // 打包为单个JS文件
          "format": "iife" // 生成全局可访问的立即执行函数包
        }
      }
    }
  }
}

新建tsconfig.widget.json，适配全局脚本的编译规则：

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "target": "ES5",
    "module": "ES2020",
    "moduleResolution": "node",
    "declaration": false,
    "strict": true,
    "esModuleInterop": true
  },
  "files": ["src/main.widget.ts", "src/polyfills.ts"]
}

2. 编写微件入口逻辑 #

放弃Angular默认的自动bootstrap，改为暴露全局初始化函数，让外部页面主动触发微件加载：

// src/main.widget.ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

// 暴露全局函数，接收容器ID与配置参数
(window as any).initMyAngularWidget = function(containerId: string, config?: any) {
  const container = document.getElementById(containerId);
  if (!container) {
    console.error('微件容器未找到');
    return;
  }
  
  // 可根据传入的config自定义微件行为
  platformBrowserDynamic().bootstrapModule(AppModule)
    .then(moduleRef => {
      // 将微件组件挂载到指定容器
      const appComp = moduleRef.injector.get(AppComponent);
      container.appendChild(appComp.elementRef.nativeElement);
    })
    .catch(err => console.error('微件初始化失败:', err));
};

同时修改app.component.ts，让组件支持手动挂载：

import { Component, ElementRef } from '@angular/core';

@Component({
  selector: 'app-widget',
  template: `<div>你的微件内容</div>`
})
export class AppComponent {
  constructor(public elementRef: ElementRef) {}
}

3. 构建微件 #

执行构建命令生成产物：

ng build --configuration production --project your-project-name

构建完成后，dist/widget目录下会生成单个可直接引用的JS文件（如main.js）。

4. 外部页面嵌入微件 #

动态加载脚本时，必须等待脚本加载完成后再调用初始化函数，避免全局函数未定义的问题：

<!-- 预留微件容器 -->
<div id="angular-widget-container"></div>

<script>
(function() {
  function initWidget() {
    // 脚本加载完成后触发微件初始化
    window.initMyAngularWidget('angular-widget-container', {
      title: '自定义微件标题' // 可选配置参数
    });
  }

  const script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = 'path/to/dist/widget/main.js'; // 替换为实际文件路径
  script.async = true;

  // 兼容不同浏览器的加载完成事件监听
  if (script.readyState) {
    script.onreadystatechange = function() {
      if (script.readyState === 'loaded' || script.readyState === 'complete') {
        script.onreadystatechange = null;
        initWidget();
      }
    };
  } else {
    script.onload = initWidget;
  }

  document.head.appendChild(script);
})();
</script>

常见问题排查 #

• 路径错误：确保脚本src路径可访问，可先用绝对路径测试验证
• 打包格式问题：若选择umd格式，需在angular.json中添加"globalName": "MyAngularWidget"，外部通过window.MyAngularWidget.init()调用
• 依赖缺失：若微件依赖第三方库，需将其打包进单文件，或确保外部页面已加载对应依赖
• 跨域问题：若微件文件在不同域名下，需配置服务器允许CORS跨域访问

内容的提问来源于stack exchange，提问作者Matías Romero