Bạn có chắc chắn muốn xóa bài viết này không ?
Bạn có chắc chắn muốn xóa bình luận này không ?
Integrate Angular 10 and SpringBoot RestAPIs Example
https://grokonez.com/integrate-angular-10-and-springboot-restapis-example
[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
Related posts:
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 commandlineng -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.grokonez.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 grokonez.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 cmdnpm 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 grokonez.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:
– Make request: http://localhost:8080/api/hi
, result:
Done! Now you can start to develop Angular 10 with SpringBoot & SpringToolSuite!
Sourcecode
- angular8-client
- SpringBootRestAPIs
Conclusion - Angular 10 SpringBoot Integration
- You had learned how to integrate Angular 10 with SpringBoot project:
- Create an Angular 10 project
- Edit Css, HTML of Angular 10
- Integrate SpringBoot with Angular 10 production build and using proxy file
Happy Learning! Thank you very much!





