1

I am getting this error when I try use a module which have custom components using angular-element.

I try to use that module in my app as CoreModule.forRoot(). It have exported components and these same components are listed as entry component and custom component.

When I drilled down to the code, I found that the generated javascript line below is causing the error.

customElements.define('cfheader', Object(_angular_elements__WEBPACK_IMPORTED_MODULE_12__["createCustomElement"])(HeaderComponent, { injector: injector }));
...

Same line in source code in angular

customElements.define('cf-header', createCustomElement(HeaderComponent, {injector}));
...

Error message:

DOMException: Failed to execute 'define' on 'CustomElementRegistry': "cfheader" is not a valid custom element name
    at new CoreModule (http://localhost:4200/vendor.js:68177:24)
    at _createClass (http://localhost:4200/vendor.js:43333:20)
    at _createProviderInstance$1 (http://localhost:4200/vendor.js:43303:26)
    at initNgModule (http://localhost:4200/vendor.js:43239:32)
    at new NgModuleRef_ (http://localhost:4200/vendor.js:43962:9)
    at createNgModuleRef (http://localhost:4200/vendor.js:43951:12)
    at Object.debugCreateNgModuleRef [as createNgModuleRef] (http://localhost:4200/vendor.js:45776:12)
    at NgModuleFactory_.push../node_modules/@angular/core/fesm5/core.js.NgModuleFactory_.create (http://localhost:4200/vendor.js:46478:25)
    at http://localhost:4200/vendor.js:39376:43
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (http://localhost:4200/polyfills.js:2704:26)
4

0 回答 0