同一页面能否使用不同脚本生成的Angular Elements？

嘿，这个问题我之前帮同事排查过！你遇到的是多个独立打包的Angular Elements组件在同一页面运行时的典型冲突，咱们一步步来拆解解决：

先说说错误根源 #

你看到的DOMException: Failed to execute 'define' on 'CustomElementRegistry': this name has already been used，本质上是两个widget的打包产物里出现了重复注册自定义元素的情况——要么是你自己定义的组件名称撞了，要么是Angular Elements内部生成的辅助元素（比如框架自带的一些组件标识）被两个项目重复注册，更常见的是两个项目都打包了同一份自定义元素polyfill（就是你报错里的document-register-element.js），导致polyfill的注册逻辑打架。

具体解决办法，按优先级来： #

1. 先检查自定义元素名称，确保绝对唯一

这是最容易忽略也最容易解决的点！打开两个项目的模块文件，看注册自定义元素的代码：

// weather-widget的AppModule里
const weatherWidget = createCustomElement(WeatherComponent, { injector: this.injector });
// 必须保证这个标签名唯一，比如用weather-widget
customElements.define('weather-widget', weatherWidget);

// clock-widget的AppModule里
const clockWidget = createCustomElement(ClockComponent, { injector: this.injector });
// 这里用clock-widget，绝对不能和上面重复
customElements.define('clock-widget', clockWidget);

如果两个项目用了相同的标签名，直接改了就能解决一半问题。

2. 提取共享依赖，避免重复打包Angular核心代码

两个独立打包的widget都把Angular核心库、polyfill这些东西打包进去了，加载到同一页面就会重复加载，导致冲突。你可以这么做：

• 先把共享依赖（@angular/core、@angular/common、@angular/platform-browser，还有document-register-element）单独抽出来，做成一个公共脚本，在页面里最先加载。
• 然后修改每个widget的angular.json打包配置，把这些依赖标记为外部依赖，不让打包工具把它们塞进widget的脚本里：

// 在每个项目的build -> options里加这段
"externalDependencies": [
  "@angular/core",
  "@angular/common",
  "@angular/platform-browser",
  "document-register-element"
]

这样两个widget的脚本体积会小很多，也不会因为重复加载核心库冲突了。

3. 合并到同一Angular项目（最优解，如果适用）

如果这两个widget是你们团队自己维护的，最彻底的办法是把它们整合到同一个Angular项目里，作为两个独立的自定义元素导出。这样整个页面只会加载一套Angular核心代码，从根源上杜绝冲突。当然如果两个widget是完全独立的项目，这个方案可能不太方便，但能解决所有潜在的冲突问题。

4. 用iframe隔离（兜底方案）

如果上面的方法都没法用，那就只能用隔离方案了——把每个widget放在单独的iframe里运行。这样每个iframe有自己独立的CustomElementRegistry和全局环境，不会互相干扰。不过这个方式会有一点性能开销，而且widget和主页面之间的通信需要额外处理，只建议作为最后手段。

验证步骤 #

改完之后先单独测每个widget确保功能正常，然后在同一页面加载两个脚本，打开控制台看看有没有报错，同时验证两个widget都能正常运行就行啦。

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