无需iframe，如何将Angular 4应用作为组件嵌入第三方Web/桌面应用？

算力阿峰

2026-5-11

当然可行！而且随着Angular版本升级，有不少更成熟的方案能替代你现在单纯插入JS链接的方式，让嵌入过程更灵活、健壮。下面给你拆解几个靠谱的方向：

推荐方案一：Angular Elements（自定义元素）—— 官方原生方案，适合轻量组件嵌入

这是Angular官方推出的方案，专门用来把Angular组件打包成标准Web Components（自定义元素），不管第三方网站用的是React、Vue、纯HTML还是其他技术栈，都能像使用普通HTML标签一样嵌入你的组件，完全不需要iframe。

具体步骤大概是这样：

先把你的Angular 4升级到Angular 9及以上版本（推荐直接升到最新稳定版，比如17，对Web Components的支持更完善）
安装Angular Elements依赖：npm install @angular/elements

在你的Angular项目里，把要嵌入的组件注册为自定义元素，比如在app.module.ts里：

import { createCustomElement } from '@angular/elements';
import { YourEmbeddedComponent } from './your-embedded/your-embedded.component';

@NgModule({
  declarations: [YourEmbeddedComponent],
  imports: [BrowserModule],
  entryComponents: [YourEmbeddedComponent] // 旧版本需要，新版本Angular可省略
})
export class AppModule {
  constructor(private injector: Injector) {
    const customElement = createCustomElement(YourEmbeddedComponent, { injector });
    customElements.define('your-embedded-component', customElement);
  }

  ngDoBootstrap() {} // 阻止Angular自动引导根组件
}

打包成可独立运行的JS文件：执行ng build --prod，然后把打包输出的几个JS文件（runtime、polyfills、main等）合并成一个单独的文件（可以用concat工具或者手动合并）
第三方网站只需要引入这个合并后的JS文件，然后直接在HTML里写标签就能用：
```
<your-embedded-component></your-embedded-component>
```

优点：完全符合Web标准，无框架依赖；可以通过Shadow DOM实现样式隔离，不会污染第三方网站的样式；支持通过属性绑定、CustomEvent和宿主页面做数据交互。

推荐方案二：Module Federation（模块联邦）—— 适合复杂应用的微前端嵌入

如果你的Angular应用比较复杂，想拆分成多个模块分别嵌入，或者需要和宿主应用共享依赖、状态，那Angular 11+支持的Module Federation（模块联邦）会更合适。这是一种微前端架构方案，允许不同应用之间动态共享模块。

核心思路：

升级Angular到11+版本，安装@angular-architects/module-federation工具来简化配置

在你的Angular应用（作为远程应用）里配置要暴露的模块，比如在webpack.config.js里：

module.exports = withModuleFederationPlugin({
  name: 'remoteApp',
  exposes: {
    './EmbeddedModule': './src/app/embedded/embedded.module.ts',
  },
  shared: {
    "@angular/core": { singleton: true, strictVersion: true },
    "@angular/common": { singleton: true, strictVersion: true },
  },
});

宿主应用（不管什么技术栈）可以通过动态import加载你的远程模块，比如在Angular宿主里可以用路由懒加载，在非Angular宿主里可以用原生import()方法加载后挂载到指定DOM节点。

优点：支持模块懒加载，减少初始加载体积；可以共享Angular核心依赖，避免重复打包；适合大型应用的拆分和协同开发；能和宿主应用实现更复杂的通信（比如共享服务、状态管理）。

方案三：优化现有JS嵌入方式（过渡方案）

如果暂时不想大版本升级，也可以优化你现在的JS插入方式，让它更健壮：

把Angular应用打包成UMD格式，这样既可以在全局环境加载，也支持AMD/CommonJS规范，适配更多场景

提供初始化API，让第三方网站可以指定挂载的DOM元素、传递配置参数，比如：

// 你的打包后的JS暴露全局方法
window.initEmbeddedApp = function(containerId, config) {
  const container = document.getElementById(containerId);
  // 初始化Angular应用并挂载到container
};

开启Angular的ViewEncapsulation.ShadowDom来隔离样式，避免和第三方网站的样式冲突
提供销毁方法，让第三方网站可以在不需要的时候清理应用资源，防止内存泄漏：
```
window.destroyEmbeddedApp = function() {
  // 销毁Angular应用实例
};
```

关键注意事项

不管用哪种方案，都要留意这几点：

样式隔离：一定要用Shadow DOM或者CSS命名空间（比如给所有样式加专属前缀），避免你的组件样式影响第三方网站，反之亦然
通信机制：和宿主页面的交互尽量用标准方式，比如自定义元素用CustomEvent，模块联邦可以用共享服务或者自定义事件
性能优化：打包时开启树摇（Tree Shaking）、代码分割，减少JS体积；如果是自定义元素，可以考虑按需加载
兼容性：如果要兼容旧浏览器，需要引入Web Components的polyfill（比如@webcomponents/webcomponentsjs）

总结一下：如果是轻量组件嵌入，Angular Elements是最省心的原生方案；如果是复杂应用拆分，Module Federation更适合；现有方案也能优化，但升级到高版本Angular能获得更好的官方支持和性能提升。

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