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

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

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

Technologies

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

Overview

Video Guide

Goal

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

– Angular 13 project:

– SpringBoot project:

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

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

Practice

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: nodejs.org. 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:

Setup Angular 13 CLI

Install Angular CLI

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

Check Angular CLI version

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

Implement SpringBoot RestAPI project

Create SpringBoot project

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

	org.springframework.boot
	spring-boot-starter-web

RestAPI Controller

package com.javasampleapproach.angular6.restapi;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
 
@RestController
public class RestApiController {
 
	@RequestMapping("/api/hi")
	public String hi() {
		return "Hello world! >>> Message from ozenero.com";
	}
}

Setup Angular 13 project

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

Create Angular 13 project

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

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

Run Angular 13 project

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

Import Angular 13 to SpringToolSuite

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

Press ‘Finish’, angular6-client is imported:

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

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

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

Modify Angular 13 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';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Angular 13 Application';
}

Start Angular 13 from SpringToolSuite

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

Integrate SpringBoot RestAPI & Angular 13

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:

Deploy Angular 13 with Spring Boot

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

Result is a ‘dist’ folder:

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.

	maven-resources-plugin
	
	      
	          copy-resources
	          validate
	          copy-resources
	          
	              ${basedir}/target/classes/static/
	              
	                  
	                      ${basedir}/../angular6-client/dist/angular6-client
	                  
	              
	          
	      
	

Result

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:

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

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

SourceCode

Angular6-Client
SpringBootRestAPI