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

我一直遇到此错误，并添加了检查以确保尚未定义customElement。只需在定义元素之前添加以下内容即可解决此错误：

if (!customElements.get('webtest')) {  
    customElements.define('webtest', e3);
}

Answer 2

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

我的元素选择器名称 网络测试以网络测试

在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 3

怀疑，这是一个捆绑问题。根本原因是webpack（用于驱动CLI）使用运行时：webpackJsonp全局，并且每次加载另一个包（也定义了webpackJsonp）时，您都覆盖了该运行时-请参见webpack/webpack#3791（注释）。 CLI并未公开此选项（类似这样的原因是angular尚不支持此用例的原因）。您可以（尽管不建议这样做）手动将每个捆绑包中的全局webpackJsonp重命名为唯一的内容。

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

目前，如果您要使用这种用例，您可能最好的选择是使用类似汇总到build UMD bundles的方法，这些方法依赖于angular的UMD捆绑包，并从每个元素的包。这将需要一些手动工作。

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

Answer 4

我知道现在回答还很晚，但是我昨晚遇到了这个问题，这些是我的观察。希望它可以帮助其他人解决这个问题。

该错误是由于各个角度之间的webpack冲突页面上的应用程序。

解决方案是在每个Web组件应用程序的 webpack.config.js 中更改 jsonpFunction 名称。

示例：

module.exports = {
  //...
  output: {
    jsonpFunction: '<unique name for your application's json function>'
  }
};

对与capp-customtag1和capp-customtag1相关的两个项目都执行此操作。

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

4 个答案: