Structuring Angular and Java projects

4 minute read

Frontend and Backend setup

In the first part, I shared how you would begin setting up an Angular 2+ project (Part 1). Before diving further into Angular, we need to look at how to structure the codebase, so we can work with both frontend and backend.

Let’s visualize how the communication between Angular and Java would work. Here there are two popular approaches (1) and (2) each having some pros and cons.

Angula and Java Deployed

We need a way to structure the project such that the decision of picking a deployment strategy can be delayed if not changed as needed later.

The choice of deployment can be influenced by many factors:

  • Is the same team going to work on frontend and backend
  • Do we need independent releases of frontent vs backend
  • and so on…

The goal is to use a structure that’s flexible and in turn allows us to pick either of the deployment choice.

So let’s see how to use maven to create a multi module project where the frontend and backend are modules. These can later be worked upon and deployed independent of each other or combined as one release.

Create Multi module project for Angular and JEE

The recommended way to build an Angular application is to make use of Angular CLI tool. Similarly when you work with Java EE projects you typically use Maven as the build tool.

If you have followed along from the earlier part then you must already have the ng-reportapp created under report-viewer directory. In case you did, then skip the below and move on to the maven configuration section.

mkdir report-viewer
cd report-viewer
git init .

Next lets create the ng-reportapp within the same directory. We will call it ng-reportapp and use SCSS (Sass enabled) along with routing.

ng new ng-reportapp --style=scss --routing

Maven configuration

If you wish to download the setup code then just clone it like below:

git clone -b report-viewer-01

If you wish to do this manually then follow along.

Create a pom.xml under report-viewer with the following content.

report-viewer/pom.xml - This is the parent pom

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="" xmlns:xsi="" xsi:schemaLocation="">



This parent pom.xml needs to list both modules. The first module should be the UI (Angular) module followed by the Java/Spring module.

Now, create another pom.xml under ng-reportapp, with the following contents:

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="" xmlns:xsi="" xsi:schemaLocation="">
                        <id>angular-cli build</id>

The --base-href value used here is "/ng-reportapp", this is the context under which the Angular App would run.

If you run mvn clean install on this angular project, then it will in turn invoke the ng command which would build the ng-reportapp project.

It’s time to create our backend module jee-report, so lets execute the following, within the report-viewer directory.

mvn archetype:generate -DgroupId=org.prashantp.doitright -DartifactId=jee-report -DarchetypeArtifactId=maven-archetype-webapp -DinteractiveMode=false

You can replace the generated pom.xml for this new project, with the below contents.

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="" xmlns:xsi="" xsi:schemaLocation="">



                    <!-- this is relative to the pom.xml directory -->

The maven-war-plugin configuration is responsible for copying the Angular output (dist directory) and map it into the web application project for the UI part.

Based on what we did so far you should be having the below structure:

cd report-viewer (This is the parent POM project)

report-viewer *$ tree -L 2 -I node_modules
├── jee-report
│   ├── pom.xml               -- This is for Java EE module
│   └── src
├── ng-reportapp
│   ├── e2e
│   ├── karma.conf.js
│   ├── package.json
│   ├── pom.xml               -- This is to build NG project using maven
│   ├── protractor.conf.js
│   ├──
│   ├── src
│   ├── tsconfig.json
│   └── tslint.json
└── pom.xml                   -- This is the parent POM

Build the project from the parent directory report-viewer

mvn clean install

Then you will see that first it builds the Angular project then Web Project, while doing the build for the latter it also copies the Angular dist contents into the Web projects root.

So you get an output similar to the below in the WAR/Web project output directory.


├── favicon.ico
├── index.html
├── inline.5f3bf811002370d445df.bundle.js
├── main.cc8715308ebee677bf36.bundle.js
├── polyfills.f52c146b4f7d1751829e.bundle.js
├── styles.d41d8cd98f00b204e980.bundle.css
    ├── classes
    └── web.xml

Since our Angular App has the --base-href set at /ng-reportapp our WAR file must be deployed using this context. The approach of changing the context is specific to the server we use.

For JBoss/Wildfly this can be done, by creating a jboss-web.xml under WEB-INF folder, with the below content:

<?xml version="1.0"?>

Once deployed the application would be available on this URL: (Assuming defaults)


This can now be deployed as a WAR on any JEE web container!

We could simply remove the --base-href option from ng-reportapp/pom.xml which would then mean, the app would be available on the root "/" context. So the WAR context should be set accordingly.


Given the angular module and java ee modules are independent, these can be built and deployed separately. For a more cohesive option, we can combine the output of UI (Angular) and bundle it within the war itself.

We have so far seen how to build an Angular CLI project and how to structure it to work with a backend solution. Next part, will be about coding the UI components followed by the backend API.

Leave a Comment