如何将Angular应用封装为Web Component嵌入静态网站作为Widget？

阿华AIGC实验室

2026-5-29

我来帮你搞定这个问题——你遇到的核心问题有两个：一是通过innerHTML插入到Shadow DOM中的script标签，浏览器不会自动解析执行；二是即使路径正确，这种写法也不是Web Component加载外部脚本的标准方式。下面给你两种可行的解决方案，其中第二种是更符合Angular生态和Web Component规范的最佳实践：

方案一：动态加载脚本到Shadow DOM（快速修复）

修改你的script.js，改用动态创建script元素的方式注入到Shadow DOM中，这样浏览器会正常加载并执行脚本：

window.customElements.define('ng-widget', class extends HTMLElement {
  constructor() {
    super();
    const shadowRoot = this.attachShadow({ mode: 'open' });

    // 先创建Widget的基础DOM结构
    const widgetContainer = document.createElement('div');
    widgetContainer.innerHTML = `
      <meta charset="utf-8">
      <title>NgWidget</title>
      <base href="/"> <!-- 注意：这里的base要适配静态网站的路径，必要时改为绝对路径 -->
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <app-root></app-root>
    `;
    shadowRoot.appendChild(widgetContainer);

    // 动态创建并加载Angular打包脚本
    const angularScript = document.createElement('script');
    angularScript.type = 'text/javascript';
    angularScript.src = './ng-app.js'; // 确保该路径相对于静态网站的index.html
    // 可选：添加加载状态监听
    angularScript.onload = () => console.log('Angular Widget脚本加载完成');
    angularScript.onerror = (err) => console.error('Angular Widget脚本加载失败', err);
    
    shadowRoot.appendChild(angularScript);
  }
});

关键说明：

动态创建的script元素会被浏览器正常解析执行，避免了innerHTML的限制
确认ng-app.js的路径正确：如果静态网站的index.html和Angular打包的ng-app.js在同一目录，./ng-app.js就没问题；如果不在，要调整为正确的相对或绝对路径
base href需要适配静态网站的部署路径，否则Angular的路由和资源加载可能出问题

方案二：使用Angular Elements封装为原生Web Component（推荐）

这是将Angular应用转为Widget的标准方式，Angular Elements会把你的Angular组件直接封装成原生Web Component，不需要手动处理Shadow DOM和脚本加载，同时自带样式隔离。

步骤1：在Angular项目中配置Angular Elements

安装依赖：

npm install @angular/elements --save

修改app.module.ts，将AppComponent注册为自定义元素：

import { NgModule, Injector } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { createCustomElement } from '@angular/elements';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  bootstrap: [], // 不需要自动引导组件，因为要作为自定义元素
  entryComponents: [AppComponent] // 声明要转为自定义元素的组件
})
export class AppModule {
  constructor(private injector: Injector) {
    // 将AppComponent转为原生自定义元素
    const NgWidgetElement = createCustomElement(AppComponent, { injector });
    customElements.define('ng-widget', NgWidgetElement);
  }

  ngDoBootstrap() {} // 空实现，因为我们手动引导自定义元素
}

步骤2：打包Angular应用

继续使用你的build-script.js合并打包产物为ng-app.js，确保所有依赖都被包含。

直接在静态网站的index.html中引入打包后的脚本，然后使用<ng-widget>标签即可：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Widget App</title>
</head>
<body>
  <!-- 直接使用自定义元素 -->
  <ng-widget></ng-widget>
  <!-- 引入Angular打包脚本 -->
  <script type="text/javascript" src="./ng-app.js"></script>
</body>
</html>

优势：

完全符合Web Component规范，Angular应用作为原生元素运行，无需手动处理Shadow DOM
自动处理脚本加载和组件初始化，避免了路径和执行时机的问题
可以通过Angular的ViewEncapsulation.ShadowDom进一步加强样式隔离，完全不干扰父页面

关键注意事项

如果你的Angular应用使用了路由，要确保路由配置适配静态网站的部署路径，避免路由冲突
样式隔离：方案一依赖Shadow DOM的原生隔离；方案二中可以在AppComponent的装饰器中添加encapsulation: ViewEncapsulation.ShadowDom来启用Shadow DOM样式隔离
打包时要确保ng-app.js包含Angular的所有依赖（比如Zone.js、@angular/core等），否则会出现运行时错误

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