Integrate Angular 10 and SpringBoot RestAPIs Example

https://grokonez.com/integrate-angular-10-and-springboot-restapis-example

[no_toc]In the tutorial, we show you how to integrate Angular 10 with SpringBoot RestAPI for development using SpringToolSuite IDE.

• Setup Nodejs and Angular CLI
• Create simple Springboot RestAPIs
• Setup Angular 10 project
• Import Angular 10 to SpringToolSuite
• Integrate SpringBoot RestAPI with Angular 10

Related posts:

• Angular Tutorial.
• Spring Boot + Angular 6 example | Spring Data + REST + MongoDb CRUD example

Technologies

• Node.js
• Angular 10
• SpringBoot 2.x
• SpringToolSuite

  Goal - Integrate Angular 10 with SpringBoot RestAPI

• We create an Angular 10 client & SpringBoot RestAPI as below structure:

Angular 10:

SpringBoot project:

Use Angular 10 client to call Spring RestAPI, we get:

Deploy Angular 10 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

More at: https://grokonez.com/integrate-angular-10-and-springboot-restapis-example