Angular component issue

[OmarKh3]

Hi everyone,

I'm integrating Angular with AEM and trying to render a simple Angular component. The build runs fine, clientlibs-angular is generated correctly, and the JS files are included using:

<cq:includeClientLib categories="myproject.angular" />

In my HTL file, I have:

<div class="angular-hero"> <app-hero></app-hero> </div>

Angular component:

@component({ selector: 'app-hero', template: `<h1>Hello from Angular Hero!</h1>` }) export class HeroComponent {}

But nothing renders on the page, and no errors show in the console. What could I be missing?

Thanks in advance!

[SantoshSai · Accepted solution]

Hi @OmarKh3,

From what you shared, it looks like the Angular app is not bootstrapping properly within the AEM DOM. Here are a few things to check and fix:

1. Add a Bootstrap Target in the DOM

Angular needs a known element to bootstrap into. Add this in your HTL or HTML:

<div id="angular-app">
  <app-hero></app-hero>
</div>

2. Update main.ts to Bootstrap to a Specific DOM Element

By default, Angular boots to index.html, which AEM doesn’t use. Modify main.ts like this:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

document.addEventListener('DOMContentLoaded', () => {
  platformBrowserDynamic().bootstrapModule(AppModule)
    .catch(err => console.error(err));
});

Make sure your AppModule bootstraps HeroComponent or has routing set up correctly to load it.

3. Check That Your JS Files Are Actually Loading

Use browser dev tools (Network tab) to confirm that:

• runtime.js, polyfills.js, and main.js are loading.

• clientlibs-angular/js.txt is not empty and properly lists the JS files.

4. Use allowProxy="true" and Access JS via Dispatcher/Author URL

Make sure your clientlibs-angular/.content.xml has:

<jcr:root
  xmlns:jcr="http://www.jcp.org/jcr/1.0"
  jcr:primaryType="cq:ClientLibraryFolder"
  categories="[myproject.angular]"
  allowProxy="{Boolean}true"/>

This ensures AEM serves the files via /etc.clientlibs/.

Hope that helps!

[OmarKh3]

@SantoshSai - I was not bootstrapping Angular to a specific DOM element and assumed <app-hero> would just render. After updating main.ts and adding the target div in my HTL, it’s working perfectly now. Really appreciate your help!

[AmitVishwakarma]

Hi @OmarKh3 ,

1. Bootstrap Angular into the AEM DOM (manually)

Update your main.ts to explicitly target a DOM node:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

document.addEventListener('DOMContentLoaded', () => {
  const rootEl = document.querySelector('app-hero'); // OR use a custom ID if needed
  if (rootEl) {
    platformBrowserDynamic().bootstrapModule(AppModule)
      .catch(err => console.error(err));
  } else {
    console.error('Angular root component not found in DOM.');
  }
});

This makes sure Angular boots only when it finds your component tag in the actual AEM HTML.

2. Ensure Angular Component is in AppModule Bootstrap Flow

Your HeroComponent must be reachable from AppComponent, or used directly as the bootstrapped component.

If you're not using routing and just want to render HeroComponent, you can even bootstrap it directly:

@NgModule({
  declarations: [HeroComponent],
  imports: [BrowserModule],
  bootstrap: [HeroComponent] //  directly bootstrapping the component
})
export class AppModule {}

3. Use a Known DOM Structure in HTL
In AEM, put this inside your component’s .html (HTL file):

<div id="angular-app">
  <app-hero></app-hero>
</div>
​

Make sure it's not inside a conditional block or delayed by DOM manipulation.

4. Confirm JS is Loading

In Chrome DevTools > Network:

  - Look for main.js, runtime.js, polyfills.js, etc.

  - If they are missing, check this:

clientlibs-angular/.content.xml:

<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0"
          jcr:primaryType="cq:ClientLibraryFolder"
          categories="[myproject.angular]"
          allowProxy="{Boolean}true"/>

Also check:

/etc.clientlibs/yourproject/clientlibs-angular/main.js loads in browser

js.txt inside clientlibs-angular must contain:

runtime.js
polyfills.js
main.js

If it's empty, manually populate it or auto-generate using a Node script or Maven plugin.

If you're planning to embed multiple Angular components, consider turning HeroComponent into a custom element:

import { createCustomElement } from '@angular/elements';
import { Injector, NgModule } from '@angular/core';

@NgModule({
  declarations: [HeroComponent],
  imports: [BrowserModule],
  entryComponents: [HeroComponent]
})
export class AppModule {
  constructor(private injector: Injector) {
    const el = createCustomElement(HeroComponent, { injector });
    customElements.define('app-hero', el);
  }

  ngDoBootstrap() {}
}

Now <app-hero></app-hero> acts like a regular Web Component in AEM no routing needed.

Regards,
Amit