MSSE SENG 5199

Course Materials for the MSSE Web Application Development Course

slidenumbers: true

Angular with Spring Boot and Gradle

Marc Kapke

kapkema@gmail.com


Goals


Required Tools to manage Angular project


Node


Node Package Manager (NPM)


Package


package.json


Creating new NPM module and package.json


Adding dependencies to package.json


Example package.json file

{
  "name": "nyt",
  "version": "0.0.1",
  "license": "MIT",
  "scripts": {    
    "build": "ng build",
    ...
  },
  "dependencies": {
    "@angular/common": "^2.4.0",
    ...
  },
  "devDependencies": {
    "@angular/cli": "1.0.0-rc.2",
    ...
  }
}

NPM - build tasks

"scripts": {
   "prebuild": "echo about to build!",
   "build": "ng build",
   "postbuild": "echo done building!"   
 },

Pre-defined tasks


Custom tasks


Custom task definition

"scripts": {
  ...
  "hello": "echo hello",
  "prehello": "echo I'm executing before hello ",
  "posthello": "echo I'm executing after hello "
},

NPM for Angular


@angular\cli


What does @angular\cli do?


Install Angular required dependencies


Add Angular to Spring Boot project

 ng new --skip-git --directory app [app-name]
- `skip-git` - don't init git repo in 'javascript'.
- `--directory` is path under `javascript` where src is generated.
    - In this example it will be `/src/main/javascript/app`
- replace `[app-name]` with the relevant app name referenced in metadata

Modify .angular-cli.json

"apps": [
    {
      "root": "src",
      "outDir": "../../resources/static",
      ...
    }]

Update .gitignore

node_modules
jspm_packages
npm-debug.log
debug.log
_test-output
_temp
/node/
/src/main/resources/static

Enable Gradle to run NPM commands

plugins {
  id "com.moowork.node" version "1.1.1"
}

Configure Node/NPM Plugin

node {
  version = '7.7.3'
  npmVersion = '4.1.2'
  download = true
  workDir = file("${project.projectDir}/node")
  nodeModulesDir = file("${project.projectDir}/src/main/javascript/app")
  npmWorkDir = file("${project.buildDir}/src/main/javascript/app")
}

Configure Node/NPM Plugin


Running NPM Tasks from Gradle


Setup Gradle Build task


Gradle build task mapping

npm_run_test.dependsOn npmInstall
npm_run_build.dependsOn npm_run_test

processResources.dependsOn npm_run_build
npm_run_start.dependsOn npm_run_build

Clean up after yourself

clean {
	final def webDir = "${project.projectDir}"
	delete "${webDir}/node"
	delete "${webDir}/src/main/javascript/app/node_modules"
	delete "${webDir}/src/main/resources/static"
	delete "${webDir}/coverage"
}

Enable proxy calls to Spring Boot

{
  "/api/*": {
    "target": "http://localhost:8080/",
    "secure": false
  }
}

Update npm start

"scripts": {
    "ng": "ng",
    "start": "ng serve --proxy-config proxy.config.json",
    "build": "ng build",
    "test": "ng test --watch false",
    "test-watcher": "ng test"
  },

Putting it all together