Slow rendering of custom angular component in AEM sites

[rakesh_h2]

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>

[ManviSharma]

Hi,

To improve the rendering time of your Angular web component in AEM as a Cloud Service:

1. Minimize bundle size.
2. Enable lazy loading.
3. Use AOT compilation.
4. Optimize component code.
5. Cache static assets.
6. Enable server-side rendering (SSR).
7. Profile and optimize network requests.

These optimizations will help reduce the rendering time and enhance performance

[rakesh_h2]

@ManviSharma Thanks for the response Manvi. Please note that it's not the initial rendering of the page which has issues, but only the angular web component, which is a part of a page.

Example:

<Container>

      <Text>

       <Title>

        <custom-angular-component>

If this is the structure of components in a page, when the page loads, Text and Title components (AEM components) are loaded fast. But <custom-angular-component>, which is the angular component converted to web component renders only after a while.