How to Integrate Angular 8 and SpringBoot RestAPIs Example

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:

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:

– Implement a RestAPI controller:

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:

– Open ‘/angular8-client/src/app/app.component.html’, edit:

– Open ‘/angular8-client/src/app/app.component.ts’, edit:

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:

– Edit package.json file for start script:

– 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.

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!

By grokonez | May 26, 2019.