AEM with Angular 2 integration strategy

Posted in AEM Tutorials, AngularJs By Raj On May 3, 2017

 

I spent lot of time on integrating AEM with Angular 2, it is not a simple task and also I did not find any article’s in google so, I thought of sharing my knowledge with you guys, the first and important thing is, the coordination between the people who are working on AEM and Angular 2 should be good in order to make the integration successful because the Angular 2 generates javascript and every angular 2 component will have selector template, the selector template is something which renders HTML, you need to understand how can we call this template in AEM and how can we load JS?

AEM with Angular 2

Here, I am going to cover few things which you need to consider while integrating AEM with Angular 2 but, if you are looking for how to integrate angular 2 with AEM and POC’s then refer my below articles

The below questions arose when I integrate AEM with Angular 2

  • Who is going to write typescript?
  • Where are we going to compile typescript? AEM or Angular 2?
  • Where do we need to place Angular 2 templates in AEM codebase? component level or some other place?
  • What kind of integration are we planning to do?

Who is going to write typescript?

The people may ask you, you are a java developer and typescript also something like class based object oriented programming so why can’t you write? as a java developer, you can understand typescript very easily but the problem here is you need to understand angular 2 modules, how it works etc… so finally it is going to be an additional learning curve for you which you need to put some additional amount of time, so here I feel like hiring dedicated Angular 2 developers is the best option

Where are we going to compile typescript? AEM or Angular 2?

The typescript is a superset of javascript so when we compile typescript finally it generate javascript, the important thing which we need to consider is where are we going to place this typescript files, in the AEM content repository or AEM client libs?

If you place typescript files at the component level or somewhere in the apps folder, then every time you need to compile the typescript files produces javascript files which may impact on the page performance, I suggest we can set up separate environment for Angular 2 and use gulp or web pack to generate javascript’s and finally place these javascript files into the AEM client libs this helps us not to compile typescript files every time, you can refer this article – Integrate AEM with angular 2

Where do we need to place Angular 2 templates in AEM codebase? component level or some other place?

The template just renders the HTML output, in MVC the template is a view, the angular 2 components also contains templates, without template the angular 2 component is useless so we must have templates and that too it should be placed in the AEM codebase. there are two approaches which we can follow at present but while designing application you can explore more options

You can place angular 2 templates either at component level or create a separate angular-templates folder under apps/<yourpojectname>/ and store all the angular 2 templates

While designing application you can choose which approach best suits for you based on your trade-offs

What kind of integration are we planning to do?

If you are planning to use Angular 2 to consume only REST API’s with out passing any data then you can use client libs and place angular 2 custom javascript files, but you must send your rendering angular template path to the Angular 2 developer so that before compiling typescript he will use the same path and generates javascript

if you are planning to pass AEM component dialog values to the Angular 2 component then it is going to be tough situation for you  need to have more coordination with angular 2 developers on passing these values, you need to understand how the angular 2 developers is expecting ? is he expecting as a input attribute to the angular 2 component or some other thing but strong co-ordination is required

if you are planning to build entire SPA application in AEM, then the first thing which I suggest is better do a POC on how to pass AEM component values to the angular 2 component, how to use route’s in AEM etc…, and I suggest you need to sit and work with angular 2 developers and understand basic things how the routes works and component works ?

Finally, I see that integrating AEM with angular 2 is not simple task the AEM Architect and Angular architect need to understand lot while designing application, how to call angular root component in AEM templates how to pass authoring dialog values, where to place template files etc… moreover, the strategy plays major role here I suggest first do the POC’s on component integration’s then routes then complete page… don’t forget to coordinate with angular guys 🙂

If anybody is looking more information on this send a mail to [email protected]  🙂