how to integrate Angular 2 + Java Maven Web Application

Question

I have created a Angular 2 front-end Application.and i have created one Java Rest WS Back-end Application which is connected to DB.

My Folder structure for Angular 2 App is below-

Angular2App   confg   dist   e2e   node_modules   public   src      app      favicon.ico      index.html      main.ts      system-config.ts      tsconfig.json      typings.d.ts   tmp   typings   .editorconfig   .gitignore   angular-cli.json   angular-cli-build.js   package.json   README.md   tslint.json   typings.json 

And My Java Maven Web Application Structure is below-

JerseyWebApp   src    main      java        Custom Package        java classes      resources      webapp        WEB-INF          web.xml        index.html   pom.xml 

I want to know how to integrate these two applications into one application which will produce only one war file.

Answer 1

Here is what I did:-

• Install Nodejs v6.9+
• Run npm install @angular/cli –g for Angular CLI
• Install Apache Maven or use any Maven friendly IDE
• Use your required Maven configuration, I used simple webapp (WAR).

Directory Stucture (Except for ngapp folder rest is standard Maven structure.)

ngfirst ├── pom.xml ├── src │   └── main │       ├── java │       ├── resources │       ├── webapp │       └── ngapp 

Angular Part

Open ngapp folder in terminal and type ng init command to initialize node and npm configuration, the result will be a simple Angular2 example application will the following directory structure inside ngapp folder:-

             ├── angular-cli.json              ├── e2e              ├── karma.conf.js              ├── node_modules              ├── package.json              ├── protractor.conf.js              ├── README.md              ├── tslint.json              ├── src                  ├── app                  ├── assets                  ├── environments                  ├── favicon.ico                  ├── index.html                  ├── main.ts                  ├── polyfills.ts                  ├── styles.css                  ├── test.ts                  └── tsconfig.json 

This structure is Angular equivalent of Maven project structure and src directory is Angular Application's source, just like maven build command generates its output in target folder, ng build command generates its output in dist folder.

In order to package the generated Angular application within Maven generated WAR modify the build configuration to change the output folder from dist to webapp, open angular-cli.json file and modify its outDir as below:-

"outDir": "../webapp/ng" 

At this point ng build command will generate built Angular Application inside ng directory of ngfirst/src/main/webapp folder.

Maven Part

Open pom.xml and configure following three maven plugins:-

1. compiler-plugin: No Java stuff to compile in /src/main/ngapp folder, exclude it.
2. war-plugin: /src/main/ngapp is Angular project folder and it should not be packaged in WAR, exclude it.
3. exec-plugin: Execute NPM Install and Angular-CLI Build commands to generate Angular Application in webapp folder for final packaging. Note --base-href argument, it is required to load Angular resources from webapp's context path.

Here is how it should look like:-

<plugins>     <plugin>         <groupId>org.apache.maven.plugins</groupId>         <artifactId>maven-compiler-plugin</artifactId>         <version>3.3</version>         <configuration>             <excludes>                 <exclude>ngapp/**</exclude>             </excludes>         </configuration>     </plugin>     <plugin>         <groupId>org.apache.maven.plugins</groupId>         <artifactId>maven-war-plugin</artifactId>         <version>3.0.0</version>         <configuration>             <excludes>                 <exclude>ngapp/**</exclude>             </excludes>         </configuration>     </plugin>     <plugin>         <groupId>org.codehaus.mojo</groupId>         <artifactId>exec-maven-plugin</artifactId>         <version>1.5.0</version>         <executions>             <execution>                 <id>exec-npm-install</id>                 <phase>generate-sources</phase>                 <configuration>                     <workingDirectory>${project.basedir}/src/main/ngapp</workingDirectory>                     <executable>npm</executable>                     <arguments>                         <argument>install</argument>                     </arguments>                 </configuration>                 <goals>                     <goal>exec</goal>                 </goals>             </execution>             <execution>                 <id>exec-npm-ng-build</id>                 <phase>generate-sources</phase>                 <configuration>                     <workingDirectory>${project.basedir}/src/main/ngapp</workingDirectory>                     <executable>ng</executable>                     <arguments>                         <argument>build</argument>                         <argument>--base-href=/ngfirst/ng/</argument>                     </arguments>                 </configuration>                 <goals>                     <goal>exec</goal>                 </goals>             </execution>         </executions>     </plugin> </plugins>   

Building Maven Project (and Angular App too)

Open Terminal in project root folder ngfirst and run mvn package command, this will generate a WAR file (ngfirst.war) in target folder.

Deploy ngfirst.war in a container, open http://localhost:8080/ngfirst/ng/index.html in Browser. (adjust your hostname and port if required)

If everything went right, you should see app works! in browser, that is Angular Application at work!!

JSP Pre-Processing

We can leverage dynamic configuration and page rendering capabilities of JSP technology with Angular application, Angular SPA is served by the Java container as regular HTML page, index.html in this case, if we configure JSP Engine to pre-process html files too, then all JSP magic can be included inside Angular SPA Page, just include the following inside web.xml

<servlet-mapping>     <servlet-name>jsp</servlet-name>     <url-pattern>*.html</url-pattern> </servlet-mapping> 

Save, rebuild maven project, deploy WAR and voila!!

Answer 2

My side I have a maven module for angular sources called prj-angular, and anoter one for war application called prj-war.

first prj angular is built:

• it uses maven-exec-plugin to call npm install and ng build (thanks to @J_Dev!)
• change resource default directory to dist/
• skip jar MANIFEST generation
• maven module result: a jar with generated angular dist/ content only!

then, second prj_war is build:

• has prj angular as dependency
• use unpack phase to unzip the previous jar into web app destination
• this module build you app war with fresh angular dist.

Follow under the corresponding plugin configuration I used:

prj angular (pom.xml extract)

<build>     <resources>         <resource>             <directory>dist</directory>         </resource>     </resources>     <plugins>         <!-- skip compile -->         <plugin>             <groupId>org.apache.maven.plugins</groupId>             <artifactId>maven-compiler-plugin</artifactId>             <executions>                 <execution>                     <id>default-compile</id>                     <phase />                 </execution>             </executions>         </plugin>         <plugin>             <groupId>org.codehaus.mojo</groupId>             <artifactId>exec-maven-plugin</artifactId>             <executions>                 <execution>                     <id>exec-npm-install</id>                     <phase>generate-sources</phase>                     <configuration>                         <workingDirectory>${project.basedir}</workingDirectory>                         <executable>npm.cmd</executable>                         <arguments>                             <argument>install</argument>                         </arguments>                     </configuration>                     <goals>                         <goal>exec</goal>                     </goals>                 </execution>                 <execution>                     <id>exec-npm-ng-build</id>                     <phase>generate-sources</phase>                     <configuration>                         <workingDirectory>${project.basedir}/src</workingDirectory>                         <executable>ng.cmd</executable>                         <arguments>                             <argument>build</argument>                             <argument>--no-progress</argument>                             <argument>--base-href=/app/ng/</argument> <== to update                         </arguments>                     </configuration>                     <goals>                         <goal>exec</goal>                     </goals>                 </execution>             </executions>         </plugin>         <plugin>             <groupId>org.apache.maven.plugins</groupId>             <artifactId>maven-jar-plugin</artifactId>             <configuration>                 <archive>                     <addMavenDescriptor>false</addMavenDescriptor>                     <manifest>                         <addClasspath>false</addClasspath>                     </manifest>                 </archive>             </configuration>         </plugin>         <plugin>             <groupId>org.apache.maven.plugins</groupId>             <artifactId>maven-shade-plugin</artifactId>             <executions>                 <execution>                     <phase>package</phase>                     <goals>                         <goal>shade</goal>                     </goals>                     <configuration>                         <filters>                             <filter>                                 <artifact>*:*</artifact>                                 <excludes>                                     <exclude>META-INF/</exclude>                                 </excludes>                             </filter>                         </filters>                     </configuration>                 </execution>             </executions>         </plugin>     </plugins> </build> 

prj war (pom.xml extract)

        <plugin>             <groupId>org.apache.maven.plugins</groupId>             <artifactId>maven-dependency-plugin</artifactId>             <executions>                 <execution>                     <id>unpack angular distribution</id>                     <phase>generate-resources</phase>                     <goals>                         <goal>unpack</goal>                     </goals>                     <configuration>                         <artifactItems>                             <artifactItem>                                 <groupId>com.myapp</groupId> <== to update                                 <artifactId>prj-angular</artifactId> <== to update                                 <overWrite>true</overWrite>                                 <includes>**/*</includes>                             </artifactItem>                         </artifactItems>                         <outputDirectory>${project.build.directory}/prjwar/ng</outputDirectory> <== to update                         <overWriteReleases>true</overWriteReleases>                         <overWriteSnapshots>true</overWriteSnapshots>                     </configuration>                 </execution>             </executions>         </plugin>