Integrate Angular 10 component with AEM 6.4

[Veenu]

Hello All,

Hope you're doing well. I need help with one use. I need to integrate my angular 10 component with AEM 6.4. The catch here is angular component is present in bundle where there are Angular 1 components as well. If I compile the component separately and include the generated clientLib folder categories in AEM component it works fine. 

But we want that every time we do the maven build my angular 10 component should also get build. Basically need to integrate maven build with npm build.

If I follow this https://helpx.adobe.com/in/experience-manager/kt/sites/using/getting-started-spa-wknd-tutorial-devel...

my angular module contains components with angular 1 and angular 10.

Kindly suggest.

Thanks,

Veenu Garg

[davidjgonzalezz]

Are you asking how you have your Maven AEM project invoke a Node.JS project that builds all your Angular components (both 1 and 10) into there compiled bundles, and automatically adds them (the built bundles) to your AEM Project deployment package as clients libs? If so, check out the ui.frontend project in the WKND Sites project (or the ui.frontend project generated from the latest AEM Project archetype).

Note that even though your on AEM 6.4 the ui.frontend project is "agnostic" to the version of AEM you're deploying to as its all "build-based"; meaning the JS/CSS are compiled and injected into the deployment artifact at (maven) build time - AEM runtime has no idea how those JS bundles were created, just that they're there and referenced by the defined clientlib category.

[Anudeep_Garnepudi · Accepted solution]

Hi @Veenu 

Use ui.frontend module which uses Webpack. Run node module, it will take care of all dependencies. Read the below article it might help.

https://docs.adobe.com/content/help/en/experience-manager-core-components/using/developing/archetype...

AG