Comments (3)
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.
from elements.
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 {}
from elements.
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 { }
from elements.
Related Issues (20)
- Not able to refresh/reload angular element using axLazyElement through Angular Proxy
- Using custom element inside ng-template of another custom element throws an error
- url not exist
- Request for shadow-root support
- How do i load <ax-lazy-element> dynamically using Angular dynamic component loader? HOT 1
- React version of axLazyElement
- The `isModule` property of a `ElementConfig` is ignored.
- Does v13.0.0 of this package support Angular 14? HOT 1
- How to merge source map files HOT 1
- QUESTION: Why is Intersection Observer and requestIdleCallback not used?
- Angular 15 migrations - inject() HOT 3
- Angular 15 migrations - deprecated entities HOT 2
- Angular 15 migrations - standalone components / directives / router / ...
- How to communicate the element ? HOT 1
- lazy elements module keep loading the MFE in an infinite loop. HOT 1
- axLazyElement not able to identify whether remote element is stopped or running HOT 13
- Bearer-token not propagated when resolving a web component from a different host
- HMR in Microfront
- Reload Component
- property binding to web component doesn't work as expected
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from elements.