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反向代理后面的服务器上

我想通过添加

        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>

---

我不再有错误，但DOM中没有显示任何内容。

我也有同样的问题，你找到解决方案了吗？@RobDePietro，是的，我找到了解决方案，我将简短地回答这个问题：听起来好像在另一个angular应用程序中使用angular web组件是不受支持的。如果有一个好的解决方案，我会很高兴听到的。

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);
    }