ozenero | Mobile & Web Programming Tutorials

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

Setup Nodejs and Angular CLI
Create simple Springboot RestAPIs
Setup Angular 10 project
Import Angular 10 to SpringToolSuite
Integrate SpringBoot RestAPI with Angular 10

– Angular Tutorial.
– Spring Boot + Angular 6 example | Spring Data + REST + MongoDb CRUD example

Technologies

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

Goal – Integrate Angular 10 with SpringBoot RestAPI

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

Angular 10:

SpringBoot project:

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

Deploy Angular 10 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:

C:\Users\Administrator>node -v & npm -v
v10.15.3
6.4.1

Setup Angular 10 CLI – Integrate Angular 10 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:

<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-web</artifactId>
</dependency>

– Implement a RestAPI controller:

package com.ozenero.restapis.controller;

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 10 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 10 project by commandline: ng new angular8-client.

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

Import Angular 10 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 10 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">
  <h1>
    Welcome to {{ title }}!
  </h1>
</div>

– Open ‘/angular8-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 = 'angular8-client with ozenero.com';
}

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 10

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

<plugin>
  <artifactId>maven-resources-plugin</artifactId>
  <executions>
        <execution>
            <id>copy-resources</id>
            <phase>validate</phase>
            <goals><goal>copy-resources</goal></goals>
            <configuration>
                <outputDirectory>${basedir}/target/classes/static/</outputDirectory >
                <resources>
                    <resource>
                        <directory>${basedir}/../angular8-client/dist/angular6-client</directory >
                    </resource>
                </resources>
            </configuration>
        </execution>
  </executions>
</plugin>

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: