Angular Web组件已注册两次

问题描述

我创建了一个Angular 10 Webelement组件并将其注册到NgModule中，如下所示：

    export class AppModule implements dobootstrap {
    constructor(private injector: Injector) {}
    ngdobootstrap(appRef: ApplicationRef) {
      const element = createCustomElement(LogsComponent,{
        injector: this.injector,});
      customElements.define("logs-component",element);
  }
}

然后，我在package.json文件中添加了两个脚本来打包和构建Web组件：

    "build:elements": "ng build --prod --aot --project elements --output-hashing none && npm run pack:elements && cp projects/elements/package.json dist/elements","pack:elements": "cat ./dist/elements/*.js > dist/logs-viewer-component.js && ls -lah dist/logs-viewer-component.js"

运行'npm run build：elements'脚本后，我得到logs-viewer-component.js，然后将其部署到Nginx反向代理后面的服务器。

我想通过添加将该Web组件附加到另一个Angular应用程序内的特定组件中

        const logsComponentElement = document.createElement('logs-component');
        const logsComponentElementContainer = document.getElementById('ng-container');
        logsComponentElementContainer.appendChild(this.logsComponentElement);

，然后通过将脚本标签添加到index.html文件的标题标签中：

<script src="http://localhost:8080/components/logs-viewer-component/logs-viewer-component.js"></script>

问题是：构建父Angular应用后，我总是会遇到此错误：

logs-viewer-component.js:1 DOMException: Failed to execute 'define' on 'CustomElementRegistry': the name "x-component" has already been used with this registry
    at CustomElementRegistry.t.<computed> [as define] (http://localhost:8080/components/logs-viewer-component/logs-viewer-component.js:1:1512891)

注意：

服务模式下没有出现此错误。

编辑：

在定义元素之前添加此条件之后：

if (!customElements.get('logs-component')) {
      console.log('inside if')
      customElements.define('logs-component',element);
    }

我不再遇到错误，但是DOM中什么也没出现。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）