Integrate Angular 10 and SpringBoot RestAPIs Example
Tags: angular10, springboot, restapi
Published: 2021-03-05 15:05:27

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.
<ul>
<li>Setup Nodejs and Angular CLI</li>
<li>Create simple Springboot RestAPIs</li>
<li>Setup Angular 10 project</li>
<li>Import Angular 10 to SpringToolSuite</li>
<li>Integrate SpringBoot RestAPI with Angular 10</li>
</ul>

Related posts:

- <a href="https://grokonez.com/angular-tutorial">Angular Tutorial</a>.
- <a href="https://grokonez.com/spring-framework/spring-boot/spring-boot-angular-6-example-spring-data-rest-mongodb-crud-example">Spring Boot + Angular 6 example | Spring Data + REST + MongoDb CRUD example</a>

<!--more-->
<h2 id="technologies">Technologies</h2>
- Node.js
- Angular 10
- SpringBoot 2.x
- SpringToolSuite
<h2 id="goal">Goal - Integrate Angular 10 with SpringBoot RestAPI</h2>
- We create an Angular 10 client & SpringBoot RestAPI as below structure:

Angular 10:

<img src="https://grokonez.com/wp-content/uploads/2019/05/angular-8-integrate-with-springboot-tutorial-angular-8-project-structure-1.png" alt="angular-8-integrate-with-springboot-tutorial---angular-8-project-structure-1" width="607" height="433" class="alignnone size-full wp-image-17957" />

SpringBoot project:

<img src="https://grokonez.com/wp-content/uploads/2019/05/angular-8-integrate-with-springboot-tutorial-springboot-project.png" alt="angular-8-integrate-with-springboot-tutorial---springboot-project" width="281" height="291" class="alignnone size-full wp-image-17958" />

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

<img src="https://grokonez.com/wp-content/uploads/2019/05/angular-8-integrate-with-springboot-tutorial-request-through-proxy.png" alt="angular-8-integrate-with-springboot-tutorial---request-through-proxy" width="352" height="132" class="alignnone size-full wp-image-17959" />

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

<img src="https://grokonez.com/wp-content/uploads/2019/05/angular-8-integrate-with-springboot-tutorial-angular-8-integrate-with-spring-boot.png" alt="angular-8-integrate-with-springboot-tutorial---angular-8-integrate-with-spring-boot" width="448" height="137" class="alignnone size-full wp-image-17960" />
<h2 id="setup-nodejs">Setup Node.js</h2>
Firstly, checking whether or not you have ‘Node.js‘ installed, by command: <code>node -v & npm -v</code>. 
If the command goes unrecognized, we must install 'NodeJS'.

-> Go to: <a href="https://nodejs.org/">nodejs.org</a>. 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:

<img src="https://grokonez.com/wp-content/uploads/2019/05/angular-8-integrate-with-springboot-tutorial-nodejs-download.png" alt="angular-8-integrate-with-springboot-tutorial-nodejs-download" width="680" height="362" class="alignnone size-full wp-image-17961" />

<img src="https://grokonez.com/wp-content/uploads/2019/05/angular-8-integrate-with-springboot-tutorial-nodejs-installing.png" alt="angular-8-integrate-with-springboot-tutorial-nodejs-installing" width="615" height="432" class="alignnone size-full wp-image-17962" />

– Open cmd, checking Node.js by commandline: <code>node -v & npm -v</code>:

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

More at: https://grokonez.com/integrate-angular-10-and-springboot-restapis-example