Integrate AEM with Angular 2 js

Integrate AEM with Angular 2 is one of most demanding combination that every client is looking for in the market. Angular 2 is an open source JavaScript framework to build web applications using HTML and JavaScript. Angular 2 is pretty new in market but due to its unbeatable features most of the companies are preferring it over other frameworks. Few of its features are:-

Advantages:-

  • Angular 2 is faster and easier than Angular 1 as it has fewer concepts as compared to angular 1.
  • Angular 2 is mainly focused for mobile apps.Even if an application is heavily load, Angular 2 keeps it fully UI responsive.
  • Dependency injection avoids developers to write long code and makes easy to maintain.

As Angular 2 is latest in market there are very few community material is available online, so i have decided to write a post on how to integrate AEM with Angular 2 js.

I am going to cover below topics as a part of this tutorial:-

Download required angular 2 js library files for AEM:-


Go to https://code.angularjs.org/ .Always look for latest version currently it is 2.0.0. When you look at above angular 2 repo there are three files available:-

  • The regular prod version of each (angular2.js).
  • A minified prod version (angular2.min.js)
  • A development version (angular2.dev.js)

Note:-For AEM we prefer angular2.min.js as we are not interested in reading or modifying this js file and same can be deployed on production environment, whereas angular2.dev.js is development version of anugular2 js file. It is same as angular2.js the only difference it has is uses long-stack-trace.js for showing long stacktrace for angular exceptions to help with your development.

Note:- Currently there was an issue going on with minified files, so Angular 2 js team has requested not to use minified files as of now. “ERROR :TypeError: this.directive_0_1.onChange is not a function”

Download below Angular 2 js Libraries:-

Note:- There is some compatibility issue with angular2-polyfills.js of beta 9, it throws below error “Uncaught TypeError: callbackFn.apply is not a function” . This is fixed in later version , here i have used beta 0 version of  angular2-polyfills.min because in later version automatic change detection is not working.

Create AEM Project Structure using Angular 2 js:-


If you are planning to use Angular 2 js for entire project you can add the required clientlibs in base page, whereas if you are using angular 2 js for limited set of components you can add the required clientlibs in component jsp itself.

Follow below steps to set up project structure:-

  • Select apps –> Create New Folder [angular2-demo]
  • Select angular2-demo and create 2 new folders under it [components, templates]
    Note:- Components folder will hold all the rendering components and templates folder will hold all the templates
  • Under components create 2 folders [content,page]
    Note:- Under content folder we will keep all the content rendering components whereas under page folder we will keep all the page rendering components.
  • Select page folder and create a base-page component. Enter below details on first screen and then click next and finish on last screen.
    base-page-component

Note:- This component will inherit foundation page component and will be inherited by all other page components. So that we dot have to include same code again and again. We have used component group as hidden so that this component wont be visible in sidekick.

Note:- If you are willing to include angular2 js files from online repo, you can visit https://cdnjs.com/libraries/ and include respective library files in component jsp.

  • Open base-page.jsp and add below lines.
<%-- Base Page component. this is base page --%><% %><%@page session="false" %><% %><% // TODO add you code here %>

<cq:include script="head.jsp"/>
<cq:include script="content.jsp"/>
<cq:include script="footer.jsp"/>
  • Now create 3 jsp files parallel to base-page.jsp [head.jsp, body.jsp, footer.jsp]
  • In head.jsp we will add the clientlibs, but you can also use it to header and other components as per your requirement
  • In body.jsp you can add text or script that you want to render in body section, we will keep it blank as right now we don’t require it.
  • In footer.jsp you can add footer, so that it will be available through out the website.
  • Now lets add angular2 js files to our clientlibs. There are two ways to add clientlibs either to /etc/design or to /apps folder
  • Follow below steps to add clientlibs to /etc/design
    • Go to miscadmin console localhost:4502/miscadmin.
    • Select Design folder and create a new page under it using name as angular2-demo( you can give any name but its recommended to keep design name in sync with project name) and template as Design Template.
    • Again go back to localhost:4502/crx/de/index.jsp
    • Go to /etc/design/
  • Select angular2-demo and create a new node with name clientlibs and type cq:ClientLibraryFolder
  • Select clientlibs folder and add categories property to it
    • Name:- categories
    • type:- String[]
    • value:- etc.angular2-demo
  • Select clientlibs folder and create a new folder inside clientlibs with name angularNativeJs {you can use any name}.
  • Upload angular2.js that we have downloaded in above steps in js folder.For uploading either use webdav or vault. If you are not familiar with both just create a new file with name angular2.js under js folder and copy paste the code from downloaded angular2 js file to this file.
  • Repeat the above steps for es6-shim.min.js,system-polyfills.js,angular2-polyfills.js,system.js,typescript.js,Rx.js.
  • Create js.txt file parallel to js folder and add below line to it.
#base=js
es6-shim.min.js
system-polyfills.js
angular2-polyfills.js
system.js
typescript.js
Rx.js
angular2.js
  • Go to /apps/angular2-demo/components/page/base-page –> open head.jsp and add below code to it.
<%@include file="/libs/foundation/global.jsp" %>

<cq:includeClientLib css="etc.angular2-demo"/>

<cq:include script="/libs/wcm/core/components/init/init.jsp"/>

That’s it, your project structure is ready. Now create a rendering component using angular2 js.

Note:- The only thing remaining is creation of environment_app.component.ts and environment_main.ts file. That we will create while we create rendering component as for each component we have to create these two file. So it’s good if we keep these files under apps/[respective component]  each component.

 

Spread the love
37    

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.