How to integrate Angular 4 with SpringBoot RestApi using SpringToolSuite
Tags: angular, springboot, integrate
Published: 2021-05-09 09:13:27

https://ozenero.com/integrate-angular-4-springboot-web-app-springtoolsuite

How to integrate Angular 4 with SpringBoot RestApi using SpringToolSuite

<strong>Angular 4</strong> is the next version of Angular2 that comes with almost everything you need to build <strong>Across All Platforms</strong> frontend web or mobile apps with high speed & performance. So in the tutorial, <strong>JavaSampleApproach</strong> will guide you through the steps of integrating <strong>Angular 4</strong> with <strong>SpringBoot Web App</strong> and <strong>SpringToolSuite</strong> for development.

Angular 6:
- <a href="https://ozenero.com/frontend/angular/how-to-integrate-angular-6-springboot-2-0-restapi-springtoolsuite">How to Integrate Angular 6 & SpringBoot 2.0 RestAPI – SpringToolSuite</a>

Related articles:
- <a href="https://ozenero.com/spring-framework/spring-boot/configure-angularjs-springboot">How to configure AngularJs with Spring MVC | SpringBoot</a>
- <a href="https://ozenero.com/spring-framework/spring-boot/http-angularjs-spring-boot">How to integrate Http Angularjs with Spring MVC | Spring Boot</a>
- <a href="https://ozenero.com/tool/setup-angular-ide-spring-tool-suite">How to setup Angular IDE with Spring Tool Suite</a>
- <a href="https://ozenero.com/spring-framework/spring-boot/use-angular-http-client-fetch-data-springboot-restapi">How to use Angular Http Client to fetch Data from SpringBoot RestAPI – Angular 4</a>
- <a href="https://ozenero.com/spring-framework/spring-boot/use-angular-httpclient-post-put-delete-data-springboot-rest-apis-angular-4">How to use Angular HttpClient to POST, PUT, DELETE data on SpringBoot Rest APIs – Angular 4</a>
- <a href="https://ozenero.com/spring-framework/spring-boot/angular-4-spring-jpa-postgresql-example-angular-4-http-client-spring-boot-restapi-server">Angular 4 + Spring JPA + PostgreSQL example | Angular 4 Http Client – Spring Boot RestApi Server</a>
- <a href="https://ozenero.com/spring-framework/spring-boot/angular-4-spring-jpa-mysql-example-angular-4-http-client-spring-boot-restapi-server">Angular 4 + Spring JPA + MySQL example | Angular 4 Http Client – Spring Boot RestApi Server</a>

<!--more-->
<iframe width="853" height="480" src="https://www.youtube.com/embed/Ps-7ZV8YpI0?rel=0" frameborder="0" allowfullscreen></iframe>
<div id="tuttoc" class="jsa-toc"></div>

<div id="tutcontents">
<h2>I. Technologies</h2>
– Java 1.8
– Maven 3.3.9
– Spring Tool Suite – Version 3.8.1.RELEASE
– Spring Boot: RELEASE
- Angular 4
- Node.js
<h2>II. Integrate Angular 4 with Spring Boot WebApp and SpringToolSuite</h2>
<h3>1. Install Node.js for Angular</h3>
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 <strong>Node.js</strong>.
- Go to: <a href="https://nodejs.org" target="_blank" rel="nofollow">nodejs.org</a>. Download Node.js installer, the tutorial uses version: v7.10.0. We got a <strong>node-v7.10.0-x64.msi</strong> file, double click on it and follow the guides to setup Node.js, successfully result:

<img src="https://ozenero.com/wp-content/uploads/2017/05/angular4-springboot-springtoolsuite-install-nodejs.png" alt="angular4 - springboot springtoolsuite - install nodejs" width="579" height="456" class="alignnone size-full wp-image-5193" />

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

<img src="https://ozenero.com/wp-content/uploads/2017/05/angular4-springboot-springtoolsuite-check-nodejs.png" alt="angular4 - springboot springtoolsuite - check nodejs" width="449" height="173" class="alignnone size-full wp-image-5194" />

More :
https://ozenero.com/integrate-angular-4-springboot-web-app-springtoolsuite

How to integrate Angular 4 with SpringBoot RestApi using SpringToolSuite