Angular & Spring Boot


We want to combine Spring and Angular use the Angular developing features but also be able to use the Spring IDE in the end everything should be build using maven and nicely packed into a JAR.

Let’s get started.


  • Create a multi-module project
  • Pack the frontend into an own JAR
  • Include the frontend JAR into the Spring application
  • Add a caching configuration

Less text more code get me to the source.

Multi-Module project

  • Create a new simple Spring project using
  • Generate a new angular project ng new frontend
  • Create a new pom and include frontend and backend

It may make sense to move the spring parent into the root-pom.

Why a multi-module?

You might think why the hack we don’t just pull everything into one maven artifact? Well, separation both may be considered good practice but the real reason is:
We can in that way use, during the development, the best tools for the job. Means use the angular dev server for the front-end and the Spring STS IDE for the backend. Means also just restart/ reload the UI or the Backend if the change that. Even more, build the UI and use the backend running somewhere else.

Build angular with maven

Overall we have here to choose, either we use the frontend-maven-plugin, assuming the CI server has no nodeJS installed or we go with the exec-maven-plugin. The last one is faster assuming the CI server has not to pull nodeJS first. Basically we want to run:

Build angular with exec-maven-plugin

  • npm install
  • ng build –prod

This will not delete the node_modules folder; which is intended. As this takes usually some unnecessary time.

Note: We added here already the --output-path to emulate a kind of web-jar, we will use this later to configure the Spring resource handler. We could of course remove the version here.

Add node_modules to mvn clean

Include the angular frontend in Spring

Again we have two ways to go, we could either include the JAR file and configure the resource handler, or just copy the files over into the static folder of spring during the build. The last one is very easy the first one has the advantage that we could include easily multiple angular JARs into our project.

Include the frontend as JAR

In your Spring application add implements WebMvcConfigurer. This will allow you to extend

Note: We added here already a caching configuration.

In addition we have to tell Spring that by default if anybody opens / we want to display the index.html. This is only needed if we include the angular app as JAR, as we can just delete the static folder.

Copy the Angular files

The most simple way to just include the angular into the build JAR is to copy them during the package phase into the static directory from Spring. From where it will just behave like a regular application.

If we copy the resources we can just set optional onto the frontend JAR or provided. The only reason we keep it in the pom.xml is just to ensure that it gets build first by maven; even if somebody re-sorts the modules in the root pom.

Note: If we copy the resources we can also remove the addResourceHandlers configuration from the app. As we don’t need to tell Spring to check the JAR file too.

Handling HTML 5 routes in Spring

A common problem is to handle any HTML5 routes from angular, if why are directly opened in the browser. We don’t really want to add a view handler for each angular route. We have just to add a simple @Controller with the following code.

Avoid reloading the backend on frontend changes

Including the dev-tools from Spring will unfortunately also reload the backend if we change the frontend. We could of course just remove the frontend JAR dependency but we could also tell Spring to stop. For this we have to create the in the META-INF directory telling Spring not to do so:

Proxy /api calls to the backend

Now we have to forward any calls going to /api to our backend otherwise we cannot get any data from any REST call during the usage of the angular dev web-server. For that, we have to add the proxy.conf.json to the project

and extend package.json to add a short cut add the proxy config if we run ng serve.

Now we can run the agular dev server with the proxy config using npm start.


Paul Sterl has written 20 articles

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">