How to integrate Angular 9 with SpringBoot tutorial

how to integrate springboot with angular 9 tutorial - feature image

Angular is a TypeScript-based open-source platform for mobile and desktop web application. It is loved by million of developers arround the world. Angular puts you in control over scalability and working with huge data requirements by building data models on RxJS, Immutable.js with maximum speed.

SpringBoot is a Java-based framework led by Pivotal Team and is used to create a micro Service ready Spring Application. It provides a good enviroment for Java developers to create a stand-alone and production spring application with minimun configurations.

“How to integrate Angular (current version is Angular 9 when writting the post) with SpringBoot (current version is SpringBoot 2.x)?” is one of the most question for Java and Angular developers? loizenai.com creates the tutorial to guide step by step how to do it with a clearly and easy way for starting.

Note: please do not Copy the content of @ loizenai.com

What will we do in the tutorial?

  1. Prepare Angular development environment
  2. Create an Angular 9 project
  3. Create a SpringBoot RestAPI project
  4. Integrate Angular 9 and SpringBoot

Now let’s go!

Video Guide

Prepare Angular development environment

For Angular development environment, we need Node.js® and an npm package manager.

Node.js

Angular requires a current, active LTS, or maintenance LTS version of Node.js. Check the engines key for the specific version requirements in Angular package.json.

  • To check node.js version, we use cmd run node -v in a terminal/console.
  • To download Node.js, we go to the site nodejs.org

npm package manager

Angular use the features and functionality provided by libraries that are available as npm packages. So we need a npm package manager to download npm packages.

Run npm -v in a terminal/console to check the npm client version:

check-nodejs-version-and-npm-client-installed
Check nodejs and npm client installed version

Create an Angular 9 project

Step 1: Install Angular CLI

Angular CLI is used to create Angular projects, generate Angular application and library code, and do development tasks such as testing, bundling, and deployment.

We use npm package manager to install Angular CLI globally by following cmd:
npm install -g @angular/cli

install angular cli globally
Install Angular CLI globally

Step 2: Create a workspace and initial application

For development Angular application, we need a Angular context that will be done by commandline:
ng new my-app

The CLI installs a necessary pakages and other dependencies and creates a new Angular workspace with a simple Angular app, ready to run.

Initial Angular workspace project and simple application
Initial Angular workspace project and simple application

Step 3: Run the application

Angular CLI includes a server, so we can run the Angular application locally by commandline:

cd my-app
ng serve --open

The commandline ng serve launches the server, watches your files, and rebuilds the app if having any change in Angular files

Option –open (or just -o) automatically opens your browser to http://localhost:4200/.

Run Angular application on locally
Run Angular application on locally

See the results on browser:

Angular application run on locally browser
Angular application run on locally browser

Customize Angular Application

Here is the above Angular application file’s structure:

Angular Application File's Structure
Angular Application File’s Structure

Modify style css file /src/app/app.component.css as below:

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

Modify html file /src/app/app.component.html as below:

<pre>
<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
</div>
</pre>

Modify /src/app/app.component.ts file as below code:

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

See the result on browser:

customized angular 9 application
customized angular 9 application

Create a SpringBoot RestAPI project

For integrating between SpringBoot with Angular 9, we create a SpringBoot RestAPI project with spring-boot-starter-web dependency:

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

We implement a RestAPIControllers class just having one URL API for a simple greeting as below code:

package com.loizenai.springboot.restapis.web; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; @RestController public class RestAPIControllers { @RequestMapping("/greeting") public String greeting() { return "Hello world! >>> Message from https://loizenai.com"; } }
Simple springboot restapi project
Simple springboot restapi project

Run the SpringBoot, then we make a call to URL Api /greeting:

Springboot restapi greeting message
Springboot restapi greeting message

Integrate Angular 9 and SpringBoot

How to Import Angular project to Eclipse

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

Import Angular project to Eclipse
Import Angular project to Eclipse

Here is Angular project structure in Eclipse:

Angular 9 structure in Eclipse
Angular 9 structure in Eclipse

Remove node_modules

To clean the sourcecode in Eclipse, we should remove node_modules by following the steps:
– Right click on ‘my-app’ 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’:

Add filter to exclude node_modules
Add filter to exclude node_modules

Press ‘OK’ and ‘Apply’, results:

Angular project after clean node_modules on Eclipse
Angular project after clean node_modules on Eclipse

Deploy Angular 9 frontend in SpringBoot application

We build Angular application with ng build --prod

Build Angular 9 project with production mode
Build Angular 9 project with production mode

The build processing produces a dist folder as below image:

Dist folder
Dist folder

Copy all files within the output dist/ folder to a static folder of SpringBoot project:

Copy all files in dist folder to static folder of SpringBoot project
Copy all files in dist folder to static folder of SpringBoot project

Run SpringBoot application, then check the results:

Acess SpringBoot with Angular application
Acess SpringBoot with Angular application
Access SpringBoot RestApi Greeting
Access SpringBoot RestApi Greeting

Happy Learning! See you later!

One thought on “How to integrate Angular 9 with SpringBoot tutorial”

Leave a Reply

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