如何解决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 举报,一经查实,本站将立刻删除。