Hi Team,
AEM version: AEM as a Cloud Service
We're using some custom components developed in angular in AEM sites by converting them to WebComponent.
app.module.ts
export class AppModule {
constructor(private injector: Injector) {}
ngDoBootstrap() {
const e = createCustomElement(MyCustomAngularComponent, {
injector: this.injector,
});
customElements.define('my-custom-angular-component', e);
}
}
my-custom-angular-component.ts
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-my-custom-angular-component',
templateUrl: './my-custom-angular-component.component.html',
styleUrls: ['./my-custom-angular-component.component.scss'],
})
export class MyCustomAngularComponent {
@Input() language: string;
@Input() contentlist: string;
}
The problem I'm facing is it takes a while to load/render this component on page. Any leads to improve the rendering time would be appreciated. Thanks.
Note: We're not mapping the component to AEM component. Instead we directly invoke this webcomponent inside AEM components like:
<my-custom-angular-component></my-custom-angular-component>