47

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.

2

7 Answers 7

59

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!!

5
  • 2
    I'd recommend to use <warSourceExcludes>ngapp/**</warSourceExcludes>to exclude ngapp folder or packagingExcludes>
    – belgoros
    Commented Apr 6, 2017 at 13:57
  • @J_Dev this works fine.the problem is jar includes Node modules also.how can i only includes ng serve --prod or ng build output ? Commented Jun 26, 2017 at 12:31
  • @J_Dev - Can you please explain why are you excluding ngapp from the war. I thought this question is about integrating/bundling the angular 2 app and java code in the same war. If you are excluding it then how does the angular code get deploy?
    – user911
    Commented Oct 4, 2017 at 19:30
  • don't you need url rewriting for angular routers?
    – masber
    Commented Nov 16, 2017 at 9:15
  • 1
    @user911 Directory ngapp (the sources of the Angular app) is excluded from the war, but directory webapp/ng (the executable of the Angular app) is included in the war. Commented Jan 23, 2020 at 16:29
13

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>
1
8

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
1
  • I think this is bad approach cause you put everything into webapp not just what ng build preapres. Your webapp has the node_modules/* and is causing your webapp size to explode. I discourage everyone to use this approach. The only thing in webbapp folder should be what ng build creates in your build/ or dist/ folder
    – Armando
    Commented Apr 12, 2022 at 11:05
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.

2
  • That way I tried actually putting all the web resource under src/main/webapp, but here i facing one problem like angular2 is built on typescript,so tomcat server not able to compile those files.And the application stuck. Commented Jul 22, 2016 at 17:59
  • it's right.. maybe this can help you then: stackoverflow.com/a/37398298/2285259 Commented Jul 22, 2016 at 18:09
2

I want to share how I set my Angular/Java projects. Some important things:

  1. There's only a single Maven project and it allows me to build the entire project. In this way, I can build the entire project or build client and backend separately.

  2. My project is based on Spring Boot framework. However, you can easily adapt my solution to your situation. I generate the output code of Angular project is put under the `META-INF' folder. You can obviously change it if you don't use Spring Boot.

  3. In my project, I want to publish the angular project in the public folder.

  4. When I develop, I run the Angular project and the backend project separately: Angular with ng serve and the backend project (the Java part) in the IDE (Eclipse).

Ok, let's start. The entire project structure is represented in the following picture.

Project structure

As you can see, I put the Angular project in the 'src\main\ngapp' folder. For the Java project (the backend) I used Eclipse IDE, for the Angular project I used Webstorm. You can choose your preferred IDE to manage the project. The important thing: you will need two IDE to manage the entire project.

To build the Angular project with Maven, I used the following maven profile definition.

<profile>
    <id>build-client</id>

    <build>
        <plugins>
            <plugin>
                <groupId>com.github.eirslett</groupId>
                <artifactId>frontend-maven-plugin</artifactId>
                <version>1.3</version>
                <configuration>
                    <nodeVersion>v10.13.0</nodeVersion>
                    <npmVersion>6.4.1</npmVersion>
                    <workingDirectory>src/main/ngapp/</workingDirectory>
                </configuration>
                <executions>
                    <execution>
                        <id>install node and npm</id>
                        <goals>
                            <goal>install-node-and-npm</goal>
                        </goals>
                    </execution>
                    <execution>
                        <id>npm install</id>
                        <goals>
                            <goal>npm</goal>
                        </goals>
                    </execution>
                    <execution>
                        <id>npm run build-prod</id>
                        <goals>
                            <goal>npm</goal>
                        </goals>
                        <configuration>
                            <arguments>run build</arguments>
                        </configuration>
                    </execution>
                    <execution>
                        <id>prod</id>
                        <goals>
                            <goal>npm</goal>
                        </goals>
                        <configuration>
                            <arguments>run-script build</arguments>
                        </configuration>
                        <phase>generate-resources</phase>
                    </execution>
                </executions>
            </plugin>
        </plugins>
    </build>
</profile>

As you can see, I used the com.github.eirslett:frontend-maven-plugin plugin to install node and run npm to build the Angular project. In this way, when I run the maven profile build-client The plugin is used to:

  • Check and install, if it is needed, the node version v10.13.0 in the Angular project folder src/main/ngapp/

  • Run the command npm run build. In the Angular project is defined the build alias in the package.json

"scripts": {
    "ng": "ng",
    "start": "ng serve --proxy-config proxy.conf.json",
    "build": "ng build --configuration=production",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
}

The Angular client must be place in public folder of the web application. To do this, the Angular project is configured to have the baseHref=/public. Moreover, the builded project must be place in src/main/resources/META-INF/resources/public. In angular.json you will find:

"build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
    "baseHref":"/public/",
    "outputPath": "../resources/META-INF/resources/public",
    ...    

In a no-Spring Boot project you probably need to put the builded angular project directly in src/main/webapp/public folder. To do this, just modify the angular.json file as you need.

You can find all the project's code in my github project. The plugin project is here.

1
  • I have a question about your deployment. Are you running into routing issues/ Maven? If you enter something in the url that doesn't point to /public, (ie /public/user) do you get a while list error page? It looks like our project is setup similar to yours. Both apps deploy separately under Maven , one for java one for angular. Then its configured to serve the angular app as a static page.
    – Brad8118
    Commented Feb 12, 2020 at 19:33
1

Solution based on command line building of angular project with

npm install --verbose
npm run ng build

given

src/main/frontend
src/main/webapp

maven-war-plugin + exec-maven-plugin

<plugins>
    <plugin>
        <groupId>org.apache.maven.plugins</groupId>
        <artifactId>maven-war-plugin</artifactId>
        <version>3.2.3</version>
        <configuration>
            <failOnMissingWebXml>false</failOnMissingWebXml>
            <webResources>
                <resource>
                    <directory>src/main/frontend/dist</directory>
                </resource>
            </webResources>
        </configuration>
    </plugin>
    <plugin>
        <groupId>org.codehaus.mojo</groupId>
        <artifactId>exec-maven-plugin</artifactId>
        <version>3.0.0</version>
        <executions>
            <execution>
                <id>npm-install</id>
                <phase>generate-sources</phase>
                <configuration>
                    <workingDirectory>src/main/frontend</workingDirectory>
                    <executable>npm</executable>
                    <arguments>
                        <argument>install</argument>
                    </arguments>
                </configuration>
                <goals>
                    <goal>exec</goal>
                </goals>
            </execution>
            <execution>
                <id>npm-ng-build</id>
                <phase>generate-sources</phase>
                <configuration>
                    <workingDirectory>src/main/frontend</workingDirectory>
                    <executable>npm</executable>
                    <arguments>
                        <argument>run</argument>
                        <argument>ng</argument>
                        <argument>build</argument>
                    </arguments>
                </configuration>
                <goals>
                    <goal>exec</goal>
                </goals>
            </execution>
        </executions>
    </plugin>
</plugins>

maven-war-plugin + maven-antrun-plugin (failed to run npm directly on my machine, hence OS dependent build)

<plugins>
    <plugin>
        <groupId>org.apache.maven.plugins</groupId>
        <artifactId>maven-war-plugin</artifactId>
        <version>3.2.3</version>
        <configuration>
            <failOnMissingWebXml>false</failOnMissingWebXml>
            <webResources>
                <resource>
                    <directory>src/main/frontend/dist</directory>
                </resource>
            </webResources>
        </configuration>
    </plugin>
    <plugin>
        <groupId>org.apache.maven.plugins</groupId>
        <artifactId>maven-antrun-plugin</artifactId>
        <version>3.0.0</version>
        <executions>
            <execution>
                <id>exec-gen-sources</id>
                <phase>generate-sources</phase>
                <configuration>
                    <target name="Build Frontend">
                        <exec executable="cmd" dir="src/main/frontend" failonerror="true">
                            <arg line="/c npm install --verbose" />
                        </exec>
                        <exec executable="cmd" dir="src/main/frontend" failonerror="true">
                            <arg line="/c npm run ng build" />
                        </exec>
                    </target>
                </configuration>
                <goals>
                    <goal>run</goal>
                </goals>
            </execution>
        </executions>
    </plugin>
</plugins>
0
<plugin>
                        <groupId>com.github.eirslett</groupId>
                        <artifactId>frontend-maven-plugin</artifactId>
                        <version>1.3</version>
                        <configuration>
                            <nodeVersion>v10.13.0</nodeVersion>
                            <npmVersion>6.4.1</npmVersion>
                            <workingDirectory>src/main/ngapp/</workingDirectory>
                        </configuration>
                        <executions>
                            <execution>
                                <id>install node and npm</id>
                                <goals>
                                    <goal>install-node-and-npm</goal>
                                </goals>
                            </execution>
                            <execution>
                                <id>npm install</id>
                                <goals>
                                    <goal>npm</goal>
                                </goals>
                            </execution>
                            <execution>
                                <id>npm run build-prod</id>
                                <goals>
                                    <goal>npm</goal>
                                </goals>
                                <configuration>
                                    <arguments>run build</arguments>
                                </configuration>
                            </execution>
                            <execution>
                                <id>prod</id>
                                <goals>
                                    <goal>npm</goal>
                                </goals>
                                <configuration>
                                    <arguments>run-script build</arguments>
                                </configuration>
                                <phase>generate-resources</phase>
                            </execution>
                        </executions>
                    </plugin>
1
  • 3
    Welcome to S/O. Please include a brief explanation of what you're doing when giving an answer. Commented Nov 24, 2019 at 16:24

Not the answer you're looking for? Browse other questions tagged or ask your own question.