DOMException: CustomElementRegistry.define 'ust-frontend' has already been defined as a custom element

[schnalfy]

Hello everybody,

i have a problem with "multiple different dynamic elements I would like to load 2 web components. The second compnent always uses the js-file of the first component. Therefore the error 'ust-frontend' has already been defined as a custom element. I have built the web components according to the following pattern.

I hope someone can help me.

Thanks

<< ----------------------------------->>
web component

import { AppRoutingModule } from './app-routing.module';
import { HttpClientModule } from '@angular/common/http';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, Injector } from '@angular/core';
import { Router } from '@angular/router';
import { Location} from '@angular/common';
import { createCustomElement } from '@angular/elements';

import { AppComponent } from './app.component';
import { EcbrateComponent } from './component/ecbrate/ecbrate.component';

import { FormsModule } from '@angular/forms';

@NgModule({
declarations: [
AppComponent,
EcbrateComponent
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule,
HttpClientModule
],
providers: [],
entryComponents: [AppComponent]
})
export class AppModule {
constructor(private injector: Injector, private router: Router, private location: Location ) {
const appElement = createCustomElement(AppComponent, {
injector: this.injector
});
console.log('define ecb-frontend');
customElements.define('ecb-frontend', appElement);
console.log('defined ecb-frontend');
console.log(this.location);
this.router.navigateByUrl(this.location.path(true));
console.log(this.router);
this.location.subscribe(data => {
console.log(data);
this.router.navigateByUrl(data.url);
});
}
// tslint:disable-next-line: typedef
ngDoBootstrap() {}
}

<<---------------------------------------------------->>

lazy-element component

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { url } from 'inspector';

@component({
selector: 'app-lazy-element2',
template: <ng-container *ngFor="let c of dynamicConfigs"> {{c.url}} <ax-lazy-element *axLazyElementDynamic= "c.tag, url: c.url; module: true" raised> </ax-lazy-element> </ng-container>
})
export class LazyElement2Component implements OnInit {

elementUrl = '';
elementTag = '';
onDestroy: any;
dynamicConfigs = [];

constructor(readonly activatedRoute: ActivatedRoute) {
/*
this.onDestroy = this.activatedRoute;
// tslint:disable-next-line: deprecation
let componantName = '';
this.onDestroy.url.forEach( item => {
item.forEach( pathItem => {
console.log(pathItem.path);
componantName = pathItem.path;
});
});
this.elementTag = '';
this.elementUrl = 'http://localhost:4201/component/' + componantName + '/' + componantName + '.js';
console.log(this.elementUrl);
this.elementTag = componantName;
*/
this.dynamicConfigs = [
{url: 'http://localhost:4201/component/ust-frontend/ust-frontend.js', tag: 'ust-frontend'},
{url: 'http://localhost:4201/component/ecb-frontend/ecb-frontend.js', tag: 'ecb-frontend'}
];
}

ngOnInit(): void {}

// tslint:disable-next-line: use-lifecycle-interface
ngOnDestroy() {
// this.onDestroy.unsubscribe();
}
}

<< --------------------------- >>
app.module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { LazyElementsModule } from '@angular-extensions/elements';
import { CommonModule } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './components/header/header.component';
import { HomeComponent } from './components/home/home.component';
import { DynamicLayoutComponent } from './components/dynamic-layout/dynamic-layout.component';
import { LazyElementComponent } from './components/lazy-element/lazy-element.component';
import { MainLayoutComponent } from './components/dynamic-layout/main-layout.component';
import { LoginComponent } from './components/login/login.component';
import { ReactiveFormsModule } from '@angular/forms';
import { LazyElement2Component } from './components/lazy-element2/lazy-element2.component';

@NgModule({
schemas: [CUSTOM_ELEMENTS_SCHEMA],
declarations: [
AppComponent,
HeaderComponent,
HomeComponent,
DynamicLayoutComponent,
LazyElementComponent,
LazyElement2Component,
MainLayoutComponent,
LoginComponent
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
LazyElementsModule,
CommonModule,
ReactiveFormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}

[tomastrajan]

Hi @schnalfy !

Could you please properly format your code using 3 back ticks before and 3 back ticks after? Like this

function properlyFormated() {
    console.log('I acutally can read this...')
}

Also, the error says it all currently, you can not register the same element twice so you would most like have to re-organizae your code so that the registration logic happens only once per web-component.

[schnalfy]

Hello, Tomas,

the problem is that this error occurs when I try to load a second (not the same) web component. At the moment I think that the problem lies in the call of the web component. But that changes hourly ;) Do you have an example where you call two different web components?

Thanks Ralf

web component

import { AppRoutingModule } from './app-routing.module';
import { HttpClientModule } from '@angular/common/http';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, Injector } from '@angular/core';
import { Router } from '@angular/router';
import { Location} from '@angular/common';
import { createCustomElement } from '@angular/elements';

import { AppComponent } from './app.component';
import { EcbrateComponent } from './component/ecbrate/ecbrate.component';

import { FormsModule } from '@angular/forms';

@NgModule({
declarations: [
AppComponent,
EcbrateComponent
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule,
HttpClientModule
],
providers: [],
entryComponents: [AppComponent]
})
export class AppModule {
constructor(private injector: Injector, private router: Router, private location: Location ) {
const appElement = createCustomElement(AppComponent, {
injector: this.injector
});
console.log('define ecb-frontend');
customElements.define('ecb-frontend', appElement);
console.log('defined ecb-frontend');
console.log(this.location);
this.router.navigateByUrl(this.location.path(true));
console.log(this.router);
this.location.subscribe(data => {
console.log(data);
this.router.navigateByUrl(data.url);
});
}
// tslint:disable-next-line: typedef
ngDoBootstrap() {}
}

<<---------------------------------------------------->>

lazy-element component

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { url } from 'inspector';

@component({
selector: 'app-lazy-element2',
template: <ng-container *ngFor="let c of dynamicConfigs">
<ax-lazy-element *axLazyElementDynamic= "c.tag, url: c.url; module: true" raised>


})
export class LazyElement2Component implements OnInit {

elementUrl = '';
elementTag = '';
onDestroy: any;
dynamicConfigs = [];

constructor(readonly activatedRoute: ActivatedRoute) {
this.dynamicConfigs = [
{url: 'http://localhost:4201/component/ust-frontend/ust-frontend.js', tag: 'ust-frontend'},
{url: 'http://localhost:4201/component/ecb-frontend/ecb-frontend.js', tag: 'ecb-frontend'}
];
}

ngOnInit(): void {}
}

<< --------------------------- >>
app.module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { LazyElementsModule } from '@angular-extensions/elements';
import { CommonModule } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './components/header/header.component';
import { HomeComponent } from './components/home/home.component';
import { DynamicLayoutComponent } from './components/dynamic-layout/dynamic-layout.component';
import { LazyElementComponent } from './components/lazy-element/lazy-element.component';
import { MainLayoutComponent } from './components/dynamic-layout/main-layout.component';
import { LoginComponent } from './components/login/login.component';
import { ReactiveFormsModule } from '@angular/forms';
import { LazyElement2Component } from './components/lazy-element2/lazy-element2.component';

@NgModule({
schemas: [CUSTOM_ELEMENTS_SCHEMA],
declarations: [
AppComponent,
HeaderComponent,
HomeComponent,
DynamicLayoutComponent,
LazyElementComponent,
LazyElement2Component,
MainLayoutComponent,
LoginComponent
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
LazyElementsModule,
CommonModule,
ReactiveFormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}

[janstadt]

Gonna help this guy out here a bit.

web component

import { AppRoutingModule } from './app-routing.module';
import { HttpClientModule } from '@angular/common/http';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, Injector } from '@angular/core';
import { Router } from '@angular/router';
import { Location } from '@angular/common';
import { createCustomElement } from '@angular/elements';

import { AppComponent } from './app.component';
import { EcbrateComponent } from './component/ecbrate/ecbrate.component';

import { FormsModule } from '@angular/forms';

@NgModule({
    declarations: [AppComponent, EcbrateComponent],
    imports: [
        BrowserModule,
        AppRoutingModule,
        FormsModule,
        HttpClientModule
    ],
    providers: [],
    entryComponents: [AppComponent]
})
export class AppModule {
    constructor(private injector: Injector, private router: Router, private location: Location) {
        const appElement = createCustomElement(AppComponent, {
            injector: this.injector
        });
        console.log('define ecb-frontend');
        customElements.define('ecb-frontend', appElement);
        console.log('defined ecb-frontend');
        console.log(this.location);
        this.router.navigateByUrl(this.location.path(true));
        console.log(this.router);
        this.location.subscribe(data => {
            console.log(data);
            this.router.navigateByUrl(data.url);
        });
    }
    // tslint:disable-next-line: typedef
    ngDoBootstrap() { }
}

lazy-element component

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { url } from 'inspector';

@component({
    selector: 'app-lazy-element2',
    template: <ng-container * ngFor="let c of dynamicConfigs">
        <ax-lazy - element * axLazyElementDynamic= "c.tag, url: c.url; module: true" raised >


})
export class LazyElement2Component implements OnInit {

    elementUrl = '';
    elementTag = '';
    onDestroy: any;
    dynamicConfigs = [];

    constructor(readonly activatedRoute: ActivatedRoute) {
        this.dynamicConfigs = [
            { url: 'http://localhost:4201/component/ust-frontend/ust-frontend.js', tag: 'ust-frontend' },
            { url: 'http://localhost:4201/component/ecb-frontend/ecb-frontend.js', tag: 'ecb-frontend' }
        ];
    }

    ngOnInit(): void { }
}

app.module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { LazyElementsModule } from '@angular-extensions/elements';
import { CommonModule } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './components/header/header.component';
import { HomeComponent } from './components/home/home.component';
import { DynamicLayoutComponent } from './components/dynamic-layout/dynamic-layout.component';
import { LazyElementComponent } from './components/lazy-element/lazy-element.component';
import { MainLayoutComponent } from './components/dynamic-layout/main-layout.component';
import { LoginComponent } from './components/login/login.component';
import { ReactiveFormsModule } from '@angular/forms';
import { LazyElement2Component } from './components/lazy-element2/lazy-element2.component';

@NgModule({
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
    declarations: [
        AppComponent,
        HeaderComponent,
        HomeComponent,
        DynamicLayoutComponent,
        LazyElementComponent,
        LazyElement2Component,
        MainLayoutComponent,
        LoginComponent
    ],
    imports: [
        BrowserModule,
        AppRoutingModule,
        HttpClientModule,
        LazyElementsModule,
        CommonModule,
        ReactiveFormsModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }