Integrate Angular 11 and SpringBoot RestAPIs Example

Integrate Angular 11 with SpringBoot

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

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

Related posts:

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

Technologies

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

Goal – Integrate Angular 11 with SpringBoot RestAPI

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

Angular 11:

angular-8-integrate-with-springboot-tutorial---angular-8-project-structure-1

SpringBoot project:

angular-8-integrate-with-springboot-tutorial---springboot-project

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

angular-8-integrate-with-springboot-tutorial---request-through-proxy

Deploy Angular 11 production-build with Spring-Boot project, We get:

angular-8-integrate-with-springboot-tutorial---angular-8-integrate-with-spring-boot

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:

angular-8-integrate-with-springboot-tutorial-nodejs-download

angular-8-integrate-with-springboot-tutorial-nodejs-installing

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

angular-8-integrate-with-springboot-tutorial-nodejs-check-the-installation-successfully

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

angular-8-integrate-with-springboot-tutorial---create-angular-project

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

angular-8-integrate-with-springboot-tutorial---start-angular-project

angular-8-integrate-with-springboot-tutorial---start-angular-project-result-on-web

Import Angular 11 to SpringBoot project

– Open SpringToolSuite, go to ‘Import -> General -> Projects’ from ‘Folder or Archieve’, press ‘Next’:
Press ‘Finish’, angular8-client is imported:

angular-8-integrate-with-springboot-tutorial---angular-8-project-structure

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

angular-8-integrate-with-springboot-tutorial---all-resource-filter-excludes

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

angular-8-integrate-with-springboot-tutorial---angular-8-project-structure-after-filter

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

Modify Angular 11 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.

angular-8-integrate-with-springboot-tutorial---angular-8-client-after-change-css-and-html

Integrate SpringBoot RestAPI with Angular 11

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:

angular-8-integrate-with-springboot-tutorial---request-through-proxy

Now deploy Angular 11 with Spring Boot,

Steps ->

– Build ‘angular8-client’ with command ng build --prod:

angular-8-integrate-with-springboot-tutorial---build-angular-8-in-production-mode

Result is a ‘dist’ folder:

angular-8-integrate-with-springboot-tutorial---angular-8-dist-result-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:

angular-8-integrate-with-springboot-tutorial---angular-8-integrate-with-spring-boot

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

angular-8-integrate-with-springboot-tutorial---spring-boot-integrate-angular-8-restapi-successfully

>>> Done! Now you can start to develop Angular 11 with SpringBoot & SpringToolSuite!

Sourcecode

angular8-client
SpringBootRestAPIs

Conclusion – Angular 11 SpringBoot Integration

– You had learned how to integrate Angular 11 with SpringBoot project:

  • Create an Angular 11 project
  • Edit Css, HTML of Angular 11
  • Integrate SpringBoot with Angular 11 production build and using proxy file

Happy Learning! Thank you very much!



By grokonez | March 5, 2021.



Got Something To Say:

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

*