How to Integrate Angular 6 & SpringBoot 2.0 RestAPI – SpringToolSuite


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

Related posts:
Angular 6 Component – How to create & integrate New Angular 6 Component
Angular 6 Service – with Observable Data for Asynchronous Operation

Spring Boot + Angular 6 example | Spring Data JPA + REST + PostgreSQL CRUD example
Spring Boot + Angular 6 example | Spring Data JPA + REST + MySQL CRUD example
Angular 6 HttpClient + Spring Boot + MariaDB example | Spring Data JPA + RestAPIs CRUD example
Spring Boot + Angular 6 example | Spring Data + REST + MongoDb CRUD example
Spring Boot + Angular 6 example | Spring Data + REST + Cassandra CRUD example


  • NodeJS
  • Angular
  • SpringBoot 2.0
  • SpringToolSuite – version: 3.9.4.RELEASE


Video Guide


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

– Angular 6 project:

Integrate-Angular-6-SpringBoot-2.0-Implement-Simple-RestAPI-Using-SpringToolSuite + created project

– SpringBoot project:

Integrate-Angular-6-SpringBoot-2.0-Implement-Simple-RestAPI-Using-SpringToolSuite + create springboot web-application

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

Integrate-Angular-6-SpringBoot-2.0-Implement-Simple-RestAPI-Using-SpringToolSuite + get SpringBoot RestAPI from Angular 6 Client

Deploy Angular 6 with Spring Boot project together, we get:

Integrate-Angular-6-SpringBoot-2.0-Implement-Simple-RestAPI-Using-SpringToolSuite + angular integrate with springboot - landpage view


Setup NodeJS
Install NodeJS

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 NodeJS installer, the tutorial uses version: 10.4.0 Current. We got a ‘node-v10.4.0-x64.msi‘ file, double click on it and follow the guides to setup NodeJS, successfully result:


Checking NodeJS version

– Open cmd, checking NodeJS by commandline: node -v & npm -v:

Integrate-Angular-6-SpringBoot-2.0-Implement-Simple-RestAPI-Using-SpringToolSuite + check NodeJS version

Setup Angular 6 CLI
Install Angular CLI

– Using commandline npm install -g @angular/cli:

Integrate-Angular-6-SpringBoot-2.0-Implement-Simple-RestAPI-Using-SpringToolSuite + install angular cli

Check Angular CLI version

– Check Angular-CLI after setup by commandline ng -v:

Integrate-Angular-6-SpringBoot-2.0-Implement-Simple-RestAPI-Using-SpringToolSuite + check AngularCLI version

Implement SpringBoot RestAPI project
Create SpringBoot project

– Using SpringToolSuite, create a simple SpringBoot 2.0 web-application, dependencies:


RestAPI Controller
package com.javasampleapproach.angular6.restapi;

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 6 project

Location of the SpringBoot project at: D:\Development\Workspace\IntegrateSpringBootRestApiAngular6
Now, open cmd, cd to D:\Development\Workspace.

Create Angular 6 project

– Create a new Angular 6 project by commandline: ng new angular6-client.

Integrate-Angular-6-SpringBoot-2.0-Implement-Simple-RestAPI-Using-SpringToolSuite + create angular project

To check angular version, go to ‘angular6-client‘ folder, type: ng -v

Integrate-Angular-6-SpringBoot-2.0-Implement-Simple-RestAPI-Using-SpringToolSuite+check angular project version

Run Angular 6 project

Start angular6-client project by cmd npm start, results:

Integrate-Angular-6-SpringBoot-2.0-Implement-Simple-RestAPI-Using-SpringToolSuite + start server

Integrate-Angular-6-SpringBoot-2.0-Implement-Simple-RestAPI-Using-SpringToolSuite + start server first view

Import Angular 6 to SpringToolSuite

Open SpringToolSuite, go to ‘Import -> General -> Projects’ from ‘Folder or Archieve’, press ‘Next’:

Integrate-Angular-6-SpringBoot-2.0-Implement-Simple-RestAPI-Using-SpringToolSuite + import angular client to spring tool suite

Press ‘Finish’, angular6-client is imported:

Integrate-Angular-6-SpringBoot-2.0-Implement-Simple-RestAPI-Using-SpringToolSuite + import angular project to spring tool suite

Clean node_modules

To clean the sourcecode in STS, we need to remove node_modules by following the steps:
– Right click on ‘angular6-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’:

Integrate-Angular-6-SpringBoot-2.0-Implement-Simple-RestAPI-Using-SpringToolSuite + filter remove node_modes

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

Integrate-Angular-6-SpringBoot-2.0-Implement-Simple-RestAPI-Using-SpringToolSuite + project client after remove node_modules

-> Now ‘node_modules’ is already removed from the SpringToolSuite.

Modify Angular 6 project

Open ‘/angular6-client/src/app/app.component.css’, edit as below:

h1 {
  color: blue;
  font-size: 150%;

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


Welcome to {{ title }}!

Open ‘/angular6-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 = 'Angular 6 Application';
Start Angular 6 from SpringToolSuite

Right click on ‘angular6-client’ project, choose ‘Show in Local Terminal -> Terminal’. Launch ‘angular6-client’ project as cmd: npm start.

Integrate-Angular-6-SpringBoot-2.0-Implement-Simple-RestAPI-Using-SpringToolSuite + modify views

Integrate SpringBoot RestAPI & Angular 6
Angular call SpringBoot RestAPIs

Angular6-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 angular6-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 angular6-client at port 4200.

Make a request http://localhost:4200/api/hi -> result:

Integrate-Angular-6-SpringBoot-2.0-Implement-Simple-RestAPI-Using-SpringToolSuite + get SpringBoot RestAPI from Angular 6 Client

Deploy Angular 6 with Spring Boot

Build ‘angular6-client’ with command ng build --prod:

Integrate-Angular-6-SpringBoot-2.0-Implement-Simple-RestAPI-Using-SpringToolSuite + build angular project

Result is a ‘dist’ folder:

Integrate-Angular-6-SpringBoot-2.0-Implement-Simple-RestAPI-Using-SpringToolSuite + build results

We have 2 approaches to deployment Kotlin Spring Boot server with angular6-client:
– Manually copy all files from ‘dist’ folder to ‘/src/main/resources/static’ folder of Kotlin 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:

Integrate-Angular-6-SpringBoot-2.0-Implement-Simple-RestAPI-Using-SpringToolSuite + angular integrate with springboot - landpage view

http://localhost:8080/api/hi, result:

Integrate-Angular-6-SpringBoot-2.0-Implement-Simple-RestAPI-Using-SpringToolSuite + angular integrate with springboot - rest api

>>> Done! Now you can start to develop Angular6 with SpringBoot & SpringToolSuite! ?



By grokonez | June 9, 2018.

Last updated on September 14, 2018.

Related Posts

12 thoughts on “How to Integrate Angular 6 & SpringBoot 2.0 RestAPI – SpringToolSuite”

  1. This a great example. Simple. I have one question. Is there a way not to run ng build –prod in command line, but execute that command from pom.xml (of spring boot project) and then copy resources.

  2. Hello I have followed your tutorial and I have just one question. I have defined in angular.json file that the ng build and ng build –prod create the files direclty in the static folder. And so I didn’t have to define the copy in the pom.xml file. Now when I run the localhost:8080 I get an empty page. Do I still have to have the dist folder in the angular app folder? Or is there a different problem?

  3. Hello Sir ,i had implemented above step but in last raise error like main method cannot find and load ,please provide the solution

  4. Hi, I have a problem at 18:55, I’m doing this concept for login module, while I make a request for URL- localhost:4200/api/login, I get an error “Cannot match any routes. Url segment: /api/login”. I need a solution to fix this issue ASAP pls!!

  5. Good one. but every time we make changes for angular project we have to build for prod?? I think its time consuming.

Got Something To Say:

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