How to Integrate Angular 8 and SpringBoot RestAPIs Example

integrate-angular-8-springboot-restapi-tutorial

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:

angular-8-integrate-with-springboot-tutorial---angular-8-project-structure-1

SpringBoot project:

angular-8-integrate-with-springboot-tutorial---springboot-project

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

angular-8-integrate-with-springboot-tutorial---request-through-proxy

Deploy Angular 8 production-build with Spring-Boot project, We get:

angular-8-integrate-with-springboot-tutorial---angular-8-integrate-with-spring-boot

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:

angular-8-integrate-with-springboot-tutorial-nodejs-download

angular-8-integrate-with-springboot-tutorial-nodejs-installing

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

angular-8-integrate-with-springboot-tutorial-nodejs-check-the-installation-successfully

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.

angular-8-integrate-with-springboot-tutorial---create-angular-project

– Run angular8-client project by cmd npm start, results:

angular-8-integrate-with-springboot-tutorial---start-angular-project

angular-8-integrate-with-springboot-tutorial---start-angular-project-result-on-web

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:

angular-8-integrate-with-springboot-tutorial---angular-8-project-structure

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’:

angular-8-integrate-with-springboot-tutorial---all-resource-filter-excludes

Press ‘OK’. Then press ‘Apply’, result:

angular-8-integrate-with-springboot-tutorial---angular-8-project-structure-after-filter

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

angular-8-integrate-with-springboot-tutorial---angular-8-client-after-change-css-and-html

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:

angular-8-integrate-with-springboot-tutorial---request-through-proxy

Now deploy Angular 8 with Spring Boot,

Steps ->

– Build ‘angular8-client’ with command ng build --prod:

angular-8-integrate-with-springboot-tutorial---build-angular-8-in-production-mode

Result is a ‘dist’ folder:

angular-8-integrate-with-springboot-tutorial---angular-8-dist-result-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:

angular-8-integrate-with-springboot-tutorial---angular-8-integrate-with-spring-boot

– Make request: http://localhost:8080/api/hi, result:

angular-8-integrate-with-springboot-tutorial---spring-boot-integrate-angular-8-restapi-successfully

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



Related Posts


1 thought on “How to Integrate Angular 8 and SpringBoot RestAPIs Example”

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

Got Something To Say:

Your email address will not be published. Required fields are marked *

*