Angular component issue

Question

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:In my HTL file, I have:

Angular component:@8220494({ selector: 'app-hero', template: `

Hello from Angular Hero!

` }) 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 Answer

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 DOMAngular needs a known element to bootstrap into. Add this in your HTL or HTML:

2. Update main.ts to Bootstrap to a Specific DOM ElementBy 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 LoadingUse 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 URLMake sure your clientlibs-angular/.content.xml has:This ensures AEM serves the files via /etc.clientlibs/.Hope that helps!

AmitVishwakarma · Answer

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 FlowYour 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 HTLIn AEM, put this inside your component’s .html (HTL file):

Make sure it's not inside a conditional block or delayed by DOM manipulation. 4. Confirm JS is LoadingIn Chrome DevTools > Network: - Look for main.js, runtime.js, polyfills.js, etc. - If they are missing, check this:clientlibs-angular/.content.xml:Also check:/etc.clientlibs/yourproject/clientlibs-angular/main.js loads in browserjs.txt inside clientlibs-angular must contain:runtime.jspolyfills.jsmain.jsIf 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 acts like a regular Web Component in AEM no routing needed.Regards,Amit

Angular component issue

1. Add a Bootstrap Target in the DOM

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

3. Check That Your JS Files Are Actually Loading

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

2 replies

1. Add a Bootstrap Target in the DOM

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

3. Check That Your JS Files Are Actually Loading

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

1. Add a Bootstrap Target in the DOM

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

3. Check That Your JS Files Are Actually Loading

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

1. Add a Bootstrap Target in the DOM

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

3. Check That Your JS Files Are Actually Loading

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

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded

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

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

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

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