Angular元素：DOMException：无法在'CustomElementRegistry'上执行'define'

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项目）中同时使用它们，当我尝试加载第二个脚本时，会收到以下错误：

错误DOMException：无法在'CustomElementRegistry'上执行'define'：此名称已用于此注册表。

对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

我面临类似的问题，我所做的是在选择器名称之间加一个连字符。

我的元素选择器名称webtest到web-test

在app.module.js中

之前

const e3 = createCustomElement(WebelementTestComponent, { injector: this.injector });
customElements.define('webtest', e3);

后

const e3 = createCustomElement(WebelementTestComponent, { injector: this.injector });
customElements.define('web-test', e3);

那时我的问题已经解决了。

Answer 2

如所怀疑的那样，这是一个捆绑问题。根本原因是webpack（驱动CLI）使用运行时：webpackJsonp global，并且每次加载另一个bundle（也定义webpackJsonp）时都会覆盖它 - 请参阅webpack/webpack#3791（comment）。 CLI没有公开这个选项（这就是为什么angular还不支持这个用例的原因）。你可以（虽然我不建议）手动将每个包中的全局webpackJsonp重命名为独特的东西。

你也复制了所有的polyfills，这可能会导致各种意想不到的结果，因为它们会填补原生API并在不同时间覆盖它们。此外，将所有角度包的副本捆绑到每个包中似乎是次优的。

目前，如果你想做这种用例，你可能最好的选择是使用像汇总到build UMD bundles的东西，它依赖于角度的UMD束并从每个元素的包中排除角度源。这将需要一些手动工作。

或者，不要使用CLI将单个元素构建到二进制文件中，将它们视为库并将它们正确地引入构建，因此您只有一个webpack运行时。