In the tutorial, we show you how to integrate Angular 8 with SpringBoot RestAPI for development using SpringToolSuite IDE.
- Setup Nodejs and Angular CLI
- Create simple Springboot RestAPIs
- Setup Angular 8 project
- Import Angular 8 to SpringToolSuite
- Integrate SpringBoot RestAPI with Angular 8
Related posts:
– Angular Tutorial.
– Spring Boot + Angular 6 example | Spring Data + REST + MongoDb CRUD example
Technologies
– Node.js
– Angular 8
– SpringBoot 2.x
– SpringToolSuite
Goal
– We create an Angular 8 client & SpringBoot RestAPI as below structure:
Angular 8:
SpringBoot project:
Use Angular 8 client to call Spring RestAPI, we get:
Deploy Angular 8 production-build with Spring-Boot project, We get:
Setup Node.js
Firstly, checking whether or not you have ‘Node.js‘ installed, by command: node -v & npm -v
.
If the command goes unrecognized, we must install ‘NodeJS’.
-> Go to: nodejs.org. Download Node.js installer, the tutorial uses version: 10.4.0 Current. We got a ‘node-v10.15.3-x64.msi‘ file, double click on it and follow the guides to setup Node.js, successfully result:
– Open cmd, checking Node.js by commandline: node -v & npm -v
:
C:\Users\Administrator>node -v & npm -v v10.15.3 6.4.1 |
Setup Angular 8 CLI
– Using commandline npm install -g @angular/cli@v8.0.0-rc.4
, then checking Angular-CLI after setup by commandline ng -v
:
Implement SpringBoot RestAPI project
– Using SpringToolSuite, create a simple SpringBoot 2.0 web-application, dependencies:
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> |
– Implement a RestAPI controller:
package com.grokonez.restapis.controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; @RestController public class RestApiController { @RequestMapping("/api/hi") public String hi() { return "Hello world! >>> Message from <a href='https://grokonez.com' target='_blank' rel="noopener noreferrer">grokonez.com</a>"; } } |
Setup Angular 8 Project
– Location of the SpringBoot project at: “C:\Users\Administrator\Documents\workspace-spring-tool-suite-4-4.1.2.RELEASE\SpringBootRestAPIs”
-> Now, open cmd, cd to workspace: “C:\Users\Administrator\Documents\workspace-spring-tool-suite-4-4.1.2.RELEASE”.
– Create a new Angular 8 project by commandline: ng new angular8-client
.
– Run angular8-client
project by cmd npm start
, results:
Import Angular 8 to SpringBoot project
– Open SpringToolSuite, go to ‘Import -> General -> Projects’ from ‘Folder or Archieve’, press ‘Next’:
Press ‘Finish’, angular8-client is imported:
To clean the sourcecode in STS, we need to remove node_modules by following the steps:
– Right click on ‘angular8-client’ project, choose Properties, then choose: ‘Resource -> Resource Filter’.
– Press ‘Add Filter…’, choose ‘Filter Type: Exclude all’, Applies to: ‘Files and folders’, and check ‘All children (recursive)’, with ‘File and Folder Atributes’, we specify ‘node_modules’:
Press ‘OK’. Then press ‘Apply’, result:
-> Now ‘node_modules’ is already removed from the SpringToolSuite.
Modify Angular 8 project
– Open ‘/angular8-client/src/app/app.component.css’, edit as below:
h1 { color: blue; font-size: 150%; } |
– Open ‘/angular8-client/src/app/app.component.html’, edit:
<!--The content below is only a placeholder and can be replaced.--> <div style="text-align:center"> <h1> Welcome to {{ title }}! </h1> </div> |
– Open ‘/angular8-client/src/app/app.component.ts’, edit:
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'angular8-client with grokonez.com'; } |
Right click on ‘angular8-client’ project, choose ‘Show in Local Terminal -> Terminal’. Launch ‘angular8-client’ project as cmd: npm start
.
Integrate SpringBoot RestAPI with Angular 8
Angular8-Client and SpringBoot server work independently on ports 4200
and 8080
. Goal of below integration: the client at 4200
will proxy any /api
requests to the SpringBoot server at port 8080
.
Step to do:
– Create a file proxy.conf.json
under project angular8-client
folder with content:
{ "/api": { "target": "http://localhost:8080", "secure": false } } |
– Edit package.json
file for start script:
"scripts": { "ng": "ng", "start": "ng serve --proxy-config proxy.conf.json", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, ... |
– Build and run the SpringBoot project at port 8080
. And restart angular8-client at port 4200
.
Make a request http://localhost:4200/api/hi
-> result:
Now deploy Angular 8 with Spring Boot,
Steps ->
– Build ‘angular8-client’ with command ng build --prod
:
Result is a ‘dist’ folder:
We have 2 approaches to deployment Spring Boot RestAPIs with angular8-client:
– Manually copy all files from ‘dist’ folder to ‘/src/main/resources/static’ folder of SpringBoot server project.
– Using Maven plugin to copy all files from ‘dist’ folder to ‘/src/main/resources/static’ folder of SpringBoot server project.
<plugin> <artifactId>maven-resources-plugin</artifactId> <executions> <execution> <id>copy-resources</id> <phase>validate</phase> <goals><goal>copy-resources</goal></goals> <configuration> <outputDirectory>${basedir}/target/classes/static/</outputDirectory > <resources> <resource> <directory>${basedir}/../angular8-client/dist/angular6-client</directory > </resource> </resources> </configuration> </execution> </executions> </plugin> |
Now build and run the SpringBoot server again with commands:
– Build: mvn clean install
– Run: mvn spring-boot:run
Then make some requests:
– http://localhost:8080
, result:
– Make request: http://localhost:8080/api/hi
, result:
>>> Done! Now you can start to develop Angular 8 with SpringBoot & SpringToolSuite!
Sourcecode
– angular8-client
– SpringBootRestAPIs
Conclusion
– You had learned how to integrate Angular 8 with SpringBoot project:
- Create an Angular 8 project
- Edit Css, HTML of Angular 8
- Integrate SpringBoot with Angular 8 production build and using proxy file
Happy Learning! Thank you very much!
Hi Sir, Ok with maven but, all my projects are in Gradle. if you don’t mind please provide Gradle plugin to copy files from dist to static.
Not working for me. when i hit the localhost:4200/api/hi
the request on the handler not hitted.
and shows the error page with the message “this siet can’t be reached”.
please give me the solution of this problem.
I follow all your step as you define,but I am getting Whiteable Error page with error code 404 when I run with port number 8080, localhost:8080