Angular 元素: DOMException: Failed to execute 'define' on 'CustomElementRegistry'

Question

我使用 Angular Elements 创建了两个自定义元素。

<capp-customtag1> is defined in customtag1.js 
<capp-customtag2> is defined in customtag2.js.

I load <capp-customtag1> with <script type="text/javascript" src="assets/customtag1.js"></script>. 

Similarly, for <capp-customtag2>

单独地，它们按预期工作。但是，如果我尝试在同一个项目(Angular 6 项目)中使用它们，当我尝试加载第二个脚本时，我会收到以下错误:

ERROR DOMException: Failed to execute 'define' on 'CustomElementRegistry': this name has already been used with this registry.

对 CustomElementRegistry 的调用是在 customtag1.js 和 customtag2.js 中进行的。

这是我用来在 Angular Element AppModule 构造函数中创建 capp-customtag1 的代码:

const el = createCustomElement(CustomTag1Component, {injector: this.injector});
customElements.define('capp-customtag1', el);

这是在第二个项目的 AppModule 构造函数中创建 capp-customtag2 的代码:

const el = createCustomElement(CustomTag2Component, {injector: this.injector});
customElements.define('capp-customtag2', el);

为什么两个元素具有相同的自定义元素名称？还有，我该如何解决这个问题。

谢谢。

Answer 1

正如怀疑的那样，这是一个捆绑问题。根本原因是 webpack(驱动 CLI)使用运行时:webpackJsonp 全局，并且每次加载另一个包(也定义了 webpackJsonp)时都会覆盖它 - 请参阅 webpack/webpack#3791 (评论)。 CLI 没有公开此选项(类似的事情就是 Angular 还不支持此用例的原因)。您可以(尽管我不推荐)手动将每个包中的全局 webpackJsonp 重命名为唯一的名称。

您还复制了所有 polyfills，这可能会导致各种意外结果，因为它们会在不同时间填充 native API 并覆盖它们。此外，将所有 Angular 包的副本捆绑到每个包中似乎不是最理想的。

目前，如果您想做这种用例，您可能最好的选择是使用 rollup 之类的东西来构建 UMD bundle ，它依赖于 Angular 的 UMD bundle 和从每个元素的包中排除 Angular 源。这需要一些手动工作。

或者，不要使用 CLI 将各个元素构建为二进制文件，而是将它们视为库并将它们正确地引入构建中，这样您就只有一个 Webpack 运行时。