Integrate AEM 6.2 with Angular 2/4


In this article, I am going to cover how to integrate Angular 2 or 4 with AEM 6.2, it does not cover much about angualrjs or AEM but, if you want to know more about angularjs then I suggest you refer my other article’s which are posted on Angular 2, at high level the angularjs will be used to build client-side web application’s

The integration which I am going to showcase you is very simple and this is very useful when you want to execute everything from Angular side like making a request to REST Api’s and render it on front-end, if you want to know how to pass angular 2 authoring dialog values from AEM component to Angular 2 component then check below link

here, I am going to use my angular 2 registration application which was built for my other article , before integrating this with AEM, the first thing which we should know is what angular application will generate when we build the angular 2 application by using “ng build” command?

The “ng build” commands generates “dist” folder which contains set of javascript files, refer the screen shot below

I am using Visual Studio Code IDE to develop angularjs application, to build the application you can go to the View -> Integrated Terminal -> run “ng build” command


As I mentioned earlier the angulajs is used to build client side web application, so when we run the “ng build” command it generates set of javascript files, all these javascript’s executes at client side, here, the main.bundle.js is important one, which contains compiled code of angular 2 components, services, and dependencies

This is very straight forward example no need of developing any AEM templates or component’s here, you just need to create one clientlib and add generated javascript files into it and the type for clientlib  is cq:ClientLibraryFolder, and category name is “angular-integration-libs”

Add all generated javascript files into the client libs folder ( inline.bundle.js, main.bundle.js, polyfills.bundle.js, styles.bundle.js and vendor.bundle.js ) and add the entries into the js.txt file


Now, in the body tag call below angular js selectors

In the header section, we need to call below base tag

Finally, create a new page and open it in the browser,  or download the code and install it using package manager then open http://localhost:4504/content/aemtoolkit/aemhome.html  you should see something like below

On click of Sign up button, the application will act as Single page application and redirects to thank you page



Leave a Reply

Your email address will not be published. Required fields are marked *