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?
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 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 firstname.lastname@example.org 🙂