Update of the Spring Boot + Angular Example

Several cycles ago we published Spring Boot kisses Angular 4. This February version 9 was released…time to give our example some love.

Let’s check for potential vulnerabilities first!

To run npm-audit via Gradle we add a new NpmTask named audit to the Gradle buildfile build.gradle:

task audit(type: NpmTask, dependsOn: 'npmInstall') {
    args = ['audit']


$ ./gradlew audit
found 8 vulnerabilities (5 low, 1 moderate, 2 high) in 845 scanned packages
  7 vulnerabilities require semver-major dependency updates.
  1 vulnerability requires manual review. See the full report for details.

FAILURE: Build failed with an exception.

Looks like we’ve got a heck of a todo list…which, in the end, boils down to the following mainly webpack related, outdated development-time dependencies:

  • webpack-dev-server [dev]
  • css-loader [dev]
  • webpack [dev]

So I went ahead and updated all major libraries at once. What could possibly go wrong?!

  • Node.js (npm) from 8.9.4 (5.6.0) to 12.17.0 (6.14.5)
  • Angular 5 to 9+
  • Webpack v3 to v4
  • Spring Boot 2.0 to 2.3

Well, what did you expect? Despite being a simple example it was an (expected) epic fail.

Note: We rebooted the original project from fwaibel/spring-boot-kisses-angular (archived) into datenkollektiv/spring-boot-kisses-angular.

Migrate from Spring Boot 2.0 to 2.3

plugins {
    id 'org.springframework.boot' version '2.3.0.RELEASE'

Cool. No surprises here…

Node.js (npm) update

The update seemed simple

node {
    version = '12.17.0'
    npmVersion = '6.14.5'
    download = true

but required some research (due to failing downloads of Node.js) and replacing the Gradle plugin com.moowork.node with gradle-node-plugin.

Another successful baby-step!

Upgrade Angular from 5.2 to 9

Here we spent some cycles on the excellent page: https://update.angular.io.

5.2 to 6.1

This step required a Typescript update and some small code changes due to an update of the rxjs library:

  • typescript update to 2.7.2
  • rxjs and zone.js updates plus
  • rewrite of import {Observable} from "rxjs/Observable" to {Observable} from 'rxjs'

6.1 to 7.2

  • typescript update to 3.1.6 and another
  • update of rxjs with no code changes required on our side.

7.2 to 8.2

As simple as updating Typescript:

  • typescript update to 3.4.5

8.2 to 9

Seem the project is in good shape now - another Typescript update.

  • typescript update to 3.7.5.


Migrate to Webpack v4 aka (ng build)

The plain To v4 from v3 didn’t work out as expected, so we decided to give the Angular CLI a try…

This results in two new Gradle tasks ngBuild and ngServe.

ng build --prod

translates into the Gradle task ngBuild.

task ngBuild(type: NodeTask, dependsOn: 'npmInstall') {
    script = project.file('node_modules/@angular/cli/bin/ng')
    args = ['build', '--prod']


ng serve

is respectively

task ngServe(type: NodeTask, dependsOn: 'npmInstall') {
    script = project.file('node_modules/@angular/cli/bin/ng')
    args = ['serve', '--open']

and several new/updated dependencies. But in the end, it looks very promising…and straight forward once the pieces are in place.


What a heavy lift for a simple Hello World application - but we did it!

$ ./gradlew audit
found 0 vulnerabilities
 in 1471 scanned packages


Photo by Belinda Fewings on Unsplash