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


– Node.js
– Angular 8
– SpringBoot 2.x
– SpringToolSuite

Goal – Integrate Angular 8 with SpringBoot RestAPI

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

Setup Angular 8 CLI – Integrate Angular 8 with SpringBoot RestAPI

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

package com.grokonez.restapis.controller;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

public class RestApiController {

	public String hi() {
		return "Hello world! >>> Message from";

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">
    Welcome to {{ title }}!

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

import { Component } from '@angular/core';

  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
export class AppComponent {
  title = 'angular8-client with';

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.

                <outputDirectory>${basedir}/target/classes/static/</outputDirectory >
                        <directory>${basedir}/../angular8-client/dist/angular6-client</directory >

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!



Conclusion – Angular 8 SpringBoot Integration

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

Last updated on March 5, 2021.

Related Posts

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

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

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

Got Something To Say:

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