Angular2 integration

[irmana]

Dear all,

We have completed an Angular2 project with the AoT and rollup tree-shaking. Now we would like to integrate this app into AEM, but we haven't found any example anywhere.

Do you guys have any ideas how to approach it - any examples we can look into?

Thanks, your help is much appreciated!

Best, Irman

[GuillaumeCleme]

AFAIK, you will simply need Angular client-libs that include the necessary Angular files. You can then split your Angular Directives/Controllers/Services into AEM components, and use HTL (Sighlty) on top if needed. So far the only issues I've encountered were trying to migrate a flat or Yeoman styled project into AEM with Gulp/Grunt + Bower, Karma, etc. At that point, client side Maven plugin pre-processing is required before building the AEM content/apps packages.

[jkuri]

Hey @GuillaumeC91! Can you maybe provide some example of how you did this, or url to Maven plugin that is used. We are currently stuck at this and would appreciate any of sample sharing.

Thank you, Jan

[GuillaumeCleme]

@jkuri The project I've built was mainly experimental, and I haven't published it yet, but in my case the original project used Grunt. I used the following Maven plugin and POM configuration: https://github.com/eirslett/frontend-maven-plugin

<plugin>
  <groupId>com.github.eirslett</groupId>
  <artifactId>frontend-maven-plugin</artifactId>
  <version>0.0.26</version>
  <executions>
    <execution>
      <goals>
        <goal>install-node-and-npm</goal>
      </goals>
      <configuration>
        <nodeVersion>v0.12.1</nodeVersion>
        <npmVersion>1.4.9</npmVersion>
      </configuration>
    </execution>
    <execution>
      <id>npm install</id>
      <goals>
        <goal>npm</goal>
      </goals>
    </execution>
    <execution>
      <id>grunt_build</id>
      <goals>
        <goal>grunt</goal>
      </goals>
      <!-- optional: default phase is "generate-resources" -->
      <phase>generate-resources</phase>
      <configuration>
        <arguments>build</arguments>
      </configuration>
    </execution>
  </executions>
</plugin>

What I'd still like to work on is migrating the content to the proper JCR structure and then running task automation tools on top, without having to worry about having to copy a standard directory structure into the JCR structure at build time.

[vasuneet]

Hi I have the similar kind of AEM integration issue with our angular2 code. We want to use templates from Adobe AEM and those templates need to be binded with Angular2 component. So there is a need for RuntimeCompiler. With AOT it is not working but without AOT we are able to use Adobe AEM template in our Angular2 Components and compile it dynamically. please let us know how we can do that ?

[vasuneet]

Any update on this?

[MadhuSamala7189]

Hey @GuillaumeC91!, Could you please let me know how to read content from AEM and render it using sightly and angular2 in the AEM component..?

[GuillaumeCleme]

@AemTech The POC I had unfortunately only used Angular, not Angular 2. Creating components was then very easy when using Sightly/HTL and static HTML components that used Angular as a client-lib. What I haven't yet gotten to is trying out Angular 2's compilation options. I see AOT being simpler to implement, but haven't been able to spend any time on this.