how to integrate Angular 2 + Java Maven Web Applic

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 application into one application which will produce only one war file.

Answer 1

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>

Answer 2

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 3

I recommend let the two applications separated, this way you have modularity. This way you can change the Angular App without affect your service, and vice versa. For second, your apache/nginx are faster to deliver your js and html from Angular instead Tomcat (for example). But if you still want put the Angular application inside the war, the pattern is that all web resources are in src/main/webapp.

Answer 4

Funnily enough, I did just this last week!

Using Netbeans 8.1 and a Tomcat servlet version 8.0.27

Angular and Java project file structure.

Java Project is called Foo. Angular Project is Bar

Foo (Java Maven Project)
|__ src
|    |__ main
|    |    |__ webapp (This folder contains the entire Angular Project)
|    |    |    |__ META-INF
|    |    |    |    \__ context.xml 
|    |    |    |__ WEB-INF
|    |    |    |    \__ web.xml
|    |    |    |__ includes
|    |    |    |    |__ css
|    |    |    |    |__ images
|    |    |    |    \__ js
|    |    |    |
|    |    |    | ## Bar project files are located here ##
|    |    |    |
|    |    |    |__ app
|    |    |    |    \__ All .ts and compiled .js files are located here
|    |    |    |__ node_modules
|    |    |    |    \__ any dependencies used for Bar are located here
|    |    |    |__ typings
|    |    |    |    \__ typings for Typescript located here
|    |    |    |
|    |    |    |__ README.txt
|    |    |    |__ index.jsp
|    |    |    |__ package.json
|    |    |    |__ systemjs.config.js
|    |    |    |__ tsconfig.json
|    |    |    |__ typings.json
|    |    |    \ ## Bar project files end here
|    |    | 
|    |    |__ resources
|    |    |    |__META-INF
|    |    |    |    \__ persistence.xml
|    |    |__ java
|    |    |    |__ hibernate.cfg.xml
|    |    |    |__ com
|    |    |    |    |__ orgName
|    |    |    |    |    |__ packageName
|    |    |    |    |    |    \__ .java files are here
|__ pom.xml
\__ nb-configuration.xml