AEM + Angular 2 integration

[Parvathy_C]

Hello All,

Need to get information on these below points with respect to Angular 2 (not Angular 1) + AEM integration.

1.      1.  Where to keep the ts files of the component? Sample component screen shot given below. Here we kept ts files as part of the component itself. But read in a blog that this is not advisable. The angular components need to be kept under clientlibs and referred by AEM component. Not sure how to achieve this.

2.      2.  Do we need to have nodejs or gulp build in AEM?

3.      3.  Using JSP or Sightly? Which is the best approach?

4.      4.  For maven multimodule project : content-bundle-archetype is preferred or any other multimodule archetype?

5.      5. Can anyone share a sample component of AEM talking to Angular 2 satisfying these points? (where ts files are from clientlibs and AEM integrated to it). I can share my personal email id for the same.

          Thanks,

          Parvathy

[edubey · Accepted solution]

Hi Parvathy,

I haven't worked with angular 2 yet, but here few things I can share with you:

1. Angular 2 can also be used with Javascript (.js) https://v2.angular.io/docs/js/latest/index.html

2. Regarding .ts , you need a compiler which converts this to js. You can use Grunt and dump the output in AEM clientlibs. Shown here

Using Front-end Technologies like Node, Grunt, and Sass with AEM | Digital Experience Platforms

3. Also I see maven based TypeScript compiler you can look into GitHub - bpauli/aem-typescript: TypeScript compiler for AEM Client Libraries

I hope it helps you.

Thanks

Praveen

[MaxBarrass]

You could keep all your JS files in /etc/clientlibs/{project} or /etc/design/{project}/clientlib-angular2