Integrate AEM 6.2 with Angular 2/4

 

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

Angular 2 with AEM integration

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

angularjs-registration

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

angularjs-libs

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

user-registration

 

  • suneeltrade kandali

    Hi Raj,

    I have been working on AEM 6.2 and Angular 2/4 real time project, so far making progress. Once show stopper I see is, i18n strings in Angular template (html code) do not work. Because webpack generates JS file for each Angular component and JS file is included to render component. Hence there is no AEM intervention to convert these strings.
    Please suggest if you have any idea.

    Suneel

    • Raj Mandalapu

      Hi Suneel,

      The i18n strings will not work in Angular templates because the angular compiler does not understand AEM format i18n strings, but we can try below approaches

      The first approach is you need to use Angular specific i18n strings and it should be maintained at angular application in the separate .xlf file and call those strings in Angular templates, and check those strings are included in the webpack generated file or not ex:
      https://embed.plnkr.co/?show=preview

      The second one is complex one, I don’t know whether it will work or not but you can try this by updating webpack generated Javascript with the Granite.I18n.get(”) , here you need to look for i18n strings in the hundreds of lines js file