Update of the Spring Boot + Angular Example

devop |

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']
}

Engage!

$ ./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.

Done.

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']
}

and

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.

Summary

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

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

BUILD SUCCESSFUL in 3s

Photo by Belinda Fewings on Unsplash