In this post, I will be sharing my view on Integrating AEM 6.1 with Angular2 and other front-end technologies with an example.

Getting started 


AEM component with Angular2.

  • Create an AEM with Angular2 Form Component which displays address suggestions to the user when the user starts typing in the address field and when the user selects one of the address suggestions, it should auto populate the country, state and zip code fields.
  • Leverage Angular2 Http Service to make Ajax calls to google maps API for the address suggestions and address details and display the response using Angular data-binding feature.
  • Leverage AEM Authoring capabilities to make the Form component labels authorable from the component dialog.

AEM Project Setup

Generate the project structure using maven archetype 10 and remove unwanted modules (ui.content, it.tests and it.launcher) for this project. Now we have two modules.

  • Core – contains Java files.
  • ui.apps – contains templates, components, Clientlibs and Angular2 code.


Maven archetype 10 gives the basic project setup with template, page components and Clientlibs. So I’m directly jumping on to creating the Form component.

Creating the Contact Details Form Component

  • Create an AEM component with the name “contactdetails” under apps/ng2-aem/components/content/.
  • Use bootstrap ui framework to build the Form component UI.
  • Create the Touch UI dialog to make the Form title, description, first name, last name, email and address field’s labels authorable.

Backend Code

ContactDetails POJO class

–  /NG2-AEM.core/src/main/java/com/ng2/aem/core/models/

The ContactDetails class contains class members to match the fields specified in the component’s dialog, and also contains their getter and setter methods.


ContactDetailsUse class

–  /NG2-AEM.core/src/main/java/com/ng2/aem/core/components/

The ContactDetailsUse is the server-side part of the AEM component and it extends the WCMUsePojo class.


Contactdetails component HTL file

– apps/ng2-aem/components/content/contactdetails/contactdetails.html

Assuming that you are already familiar with creating component and dialog in AEM, i’m not showing the steps here to create it.


Component Dialog


Setting up the Angular2 code

Create a folder named “web” under /NG2-AEM.ui.apps/src/main/. This folder will contain our Angular2 code and its build configuration.

Build configuration

Create the following files under web folder.



Few words about scripts

build   :  invokes the “gulp build” task which then calls the “run-webpack” task to transpile Typescript code into JavaScript and bundle all the JS files into two files and place it into the AEM clientlib folder.

aemsync :  invokes the “gulp aemsync” task to sync the generated JavaScript files under “etc/designs” to running AEM Instance.

watch   :  invokes the “gulp watch” task to watch the for the changes in typescript files, and when there is a change in typescript files it calls the “run-webpack” task.

NPM Packages

Angular 2 is broken into a lot of packages under @angular organization in NPM. We’ll need to install them and also need RxJS, Zone.js, and some shims which Angular2 depends on.





Typings will be downloaded to typings folder and they will be downloaded on “npm install”.


In Webpack config file we specify all the source files where they are available and how to compile and then after compilation where to put them.

Here I’m using webpack to transpile the Typescript code to JavaScript and bundle all the files into two JS files and place them into /etc/designs/ng2-aem/clientlib-site/js Clientlib folder.

  • app.js – contains the application code.
  • pollifills.js – contains the browser supporting libraries.



Gulp JS file contains following tasks.

  • clean   : deletes the JS files from “/etc/designs/Ng2-AEM/clientlib-site/js” clientlib folder before webpack task runs.
  • run-webpack   : executes the webpack config file.
  • aemsync  : sync the JS files created with webpack to running AEM Instance.
  • watch   : watches for the changes made on Typescript files and runs run-webpack task.


Angular2 Components

Angular2 is component based. Component is the combination of an HTML template and a component class that controls a portion of the screen.

Every component begins with a @Component decorator function that takes a metadata object. The metadata object describes how the HTML template and component class work together.

The selector property tells Angular to display the component’s html inside a custom () tag.

The templateUrl property specifies the URL to an external file containing the html for the view.

ContactDetails Angular2 component

– web/src/app/components/contactdetails.component.ts



AddressSuggestion Model class

– web/src/app/models/address-suggestion.ts


ContactForm Model class

– web/src/app/models/contact-form.ts


ContactDetailsService Interface

– web/src/app/services/Icontactdetails.service.ts


ContactDetailsService class

– web/src/app/services/contactdetails.service.ts


Application Module

– web/src/app/app.module.ts


Application bootstrap

– web/src/main.ts


Part2 : Click here to continue