Spring Boot And Angular 4 with Angular CLI Integration

I recently spent the time to setup Angular CLI front-end using IntelliJ and Maven tool. Angular 4 is the next version of Angular 2. In this article, I am going to show how to integrate Angular 4 with SpringBoot RestAPI using IntelliJ step by step. In this article,

 1. I used various technologies.
 -> Maven
 -> IntelliJ
 -> SpringBoot
 -> Java 8
 -> Angular 4
 ->Node.js

 2. Setup Node.js and NPM. 

Install Node.js from Download. And then check Node.js and NPM by node -v and npm -v command respectively.
-> Open CMD in Windows and check Node.js and NPM: node -v and npm -v.

 3. Install the Angular-CLI using the command line as:
 -> open cmd and type npm install -g @angular/cli
-> and check Angular-CLI after installing as: ng -v

4. Setup SpringBoot App using IntelliJ as:
-> create a simple spring-boot restful app and dependency for the web in pom.xml file as

<dependency>
   <groupId>org.springframework.boot</groupId>
   <artifactId>spring-boot-starter-web</artifactId>
</dependency>

-> And also create RestController as:

@RestControllerpublic class HomeController {

    @GetMapping("/api/check")
    public String check() {
        return "Spring Boot App";
    }
}

 5. Create Angular-4 client app using the command as:
-> Go to recently created spring-boot app location /src/main location using the terminal.
   and use the cmd: ng new frontend. where frontend is the angular project client.

-> start the frontend project by cmd: npm start and check in the URL as localhost:4200 and see the result.

6. Integrating SpringBoot Server and Angular-4 frontend app.

-> Until SpringBoot App and Angular-4 frontend work independently on port 8080 and 4200 respectively.

But now integrating: the client at 4200 will proxy any /api request to the server as.
-> create a file with name proxy-config.json under frontend folder with following content:

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

-> Edit package.json file for the start script and others as: "scripts":

"scripts": {
  "ng": "ng",
  "start": "ng serve --proxy-config proxy-config.json",
  "build": "ng build -prod",
  "postbuild": "npm run deploy",
  "predeploy": "rimraf ../resources/static/ && mkdirp ../resources/static",
  "deploy": "copyfiles -f dist/** ../resources/static",
  "test": "ng test",
  "pree2e": "webdriver-manager update --standalone false --gecko false",
  "e2e": "protractor"},

Here, I used copyfiles cmd to copy -f dist/**folder into ../resources/static.
So, Install copyfiles dependency as:
-> npm install copyfiles -g
-> Build and run the SpringBoot project and Frontend client app and check in the URL as at port 8080 and 4200 respectively. -> make request http://localhost:4200/api/check,
7. Deploy SpringBoot project with Angular4 frontend as:
-> use cmd at frontend location: npm run build
-> I used following method to copy all files from dist folder to /src/main/resources/static folder of the SpringBoot app.
-> Open Package.json file and update following portion of script part as:

"scripts": {
  "ng": "ng",
  "start": "ng serve --proxy-config proxy-config.json",
  "build": "ng build -prod",
  "postbuild": "npm run deploy",
  "predeploy": "rimraf ../resources/static/ && mkdirp ../resources/static",
  "deploy": "copyfiles -f dist/** ../resources/static",
  "test": "ng test",
  "pree2e": "webdriver-manager update --standalone false --gecko false",
  "e2e": "protractor"},

Now,
     Build and run spring-boot app using maven cmd as:
   -> build: mvn clean install
   -> run mvn spring-boot:run

        finally make request as : http://localhost:8080 and see result.
      Download        
  Done! Done!! Done!!