How to Integrate Angular 6 & SpringBoot 2.0 RestAPI – SpringToolSuite

In the tutorial, we guide how to integrate Angular 6 with SpringBoot RestAPI for development using SpringToolSuite IDE.

Related posts:
Angular 6 Component – How to create & integrate New Angular 6 Component
Angular 6 Service – with Observable Data for Asynchronous Operation

Technologies

  • NodeJS
  • Angular
  • SpringBoot 2.0
  • SpringToolSuite – version: 3.9.4.RELEASE

Goal

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

– Angular 6 project:

Integrate-Angular-6-SpringBoot-2.0-Implement-Simple-RestAPI-Using-SpringToolSuite + created project

– SpringBoot project:

Integrate-Angular-6-SpringBoot-2.0-Implement-Simple-RestAPI-Using-SpringToolSuite + create springboot web-application

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

Integrate-Angular-6-SpringBoot-2.0-Implement-Simple-RestAPI-Using-SpringToolSuite + get SpringBoot RestAPI from Angular 6 Client

Deploy Angular 6 with Spring Boot project together, we get:

Integrate-Angular-6-SpringBoot-2.0-Implement-Simple-RestAPI-Using-SpringToolSuite + angular integrate with springboot - landpage view

Practice

Setup NodeJS
Install NodeJS

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 NodeJS installer, the tutorial uses version: 10.4.0 Current. We got a ‘node-v10.4.0-x64.msi‘ file, double click on it and follow the guides to setup NodeJS, successfully result:

Integrate-Angular-6-SpringBoot-2.0-Implement-Simple-RestAPI-Using-SpringToolSuite+NodeJS-installation

Checking NodeJS version

– Open cmd, checking NodeJS by commandline: node -v & npm -v:

Integrate-Angular-6-SpringBoot-2.0-Implement-Simple-RestAPI-Using-SpringToolSuite + check NodeJS version

Setup Angular 6 CLI
Install Angular CLI

– Using commandline npm install -g @angular/cli:

Integrate-Angular-6-SpringBoot-2.0-Implement-Simple-RestAPI-Using-SpringToolSuite + install angular cli

Check Angular CLI version

– Check Angular-CLI after setup by commandline ng -v:

Integrate-Angular-6-SpringBoot-2.0-Implement-Simple-RestAPI-Using-SpringToolSuite + check AngularCLI version

Implement SpringBoot RestAPI project
Create SpringBoot project

– Using SpringToolSuite, create a simple SpringBoot 2.0 web-application, dependencies:

RestAPI Controller

Setup Angular 6 project

Location of the SpringBoot project at: D:\Development\Workspace\IntegrateSpringBootRestApiAngular6
Now, open cmd, cd to D:\Development\Workspace.

Create Angular 6 project

– Create a new Angular 6 project by commandline: ng new angular6-client.

Integrate-Angular-6-SpringBoot-2.0-Implement-Simple-RestAPI-Using-SpringToolSuite + create angular project

To check angular version, go to ‘angular6-client‘ folder, type: ng -v

Integrate-Angular-6-SpringBoot-2.0-Implement-Simple-RestAPI-Using-SpringToolSuite+check angular project version

Run Angular 6 project

Start angular6-client project by cmd npm start, results:

Integrate-Angular-6-SpringBoot-2.0-Implement-Simple-RestAPI-Using-SpringToolSuite + start server

Integrate-Angular-6-SpringBoot-2.0-Implement-Simple-RestAPI-Using-SpringToolSuite + start server first view

Import Angular 6 to SpringToolSuite

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

Integrate-Angular-6-SpringBoot-2.0-Implement-Simple-RestAPI-Using-SpringToolSuite + import angular client to spring tool suite

Press ‘Finish’, angular6-client is imported:

Integrate-Angular-6-SpringBoot-2.0-Implement-Simple-RestAPI-Using-SpringToolSuite + import angular project to spring tool suite

Clean node_modules

To clean the sourcecode in STS, we need to remove node_modules by following the steps:
– Right click on ‘angular6-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’:

Integrate-Angular-6-SpringBoot-2.0-Implement-Simple-RestAPI-Using-SpringToolSuite + filter remove node_modes

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

Integrate-Angular-6-SpringBoot-2.0-Implement-Simple-RestAPI-Using-SpringToolSuite + project client after remove node_modules

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

Modify Angular 6 project

Open ‘/angular6-client/src/app/app.component.css’, edit as below:

Open ‘/angular6-client/src/app/app.component.html’, edit:

Open ‘/angular6-client/src/app/app.component.ts’, edit:

Start Angular 6 from SpringToolSuite

Right click on ‘angular6-client’ project, choose ‘Show in Local Terminal -> Terminal’. Launch ‘angular6-client’ project as cmd: npm start.

Integrate-Angular-6-SpringBoot-2.0-Implement-Simple-RestAPI-Using-SpringToolSuite + modify views

Integrate-Angular-6-SpringBoot-2.0-Implement-Simple-RestAPI-Using-SpringToolSuite + get SpringBoot RestAPI from Angular 6 Client

Integrate SpringBoot RestAPI & Angular 6
Build Angular 6 project

Build ‘angular6-client’ with command ng build --prod:

Integrate-Angular-6-SpringBoot-2.0-Implement-Simple-RestAPI-Using-SpringToolSuite + build angular project

Result is a ‘dist’ folder:

Integrate-Angular-6-SpringBoot-2.0-Implement-Simple-RestAPI-Using-SpringToolSuite + build results

Deploy Angular 6 with Spring Boot

We have 2 approaches to deployment Kotlin Spring Boot server with angular6-client:
– Manually copy all files from ‘dist’ folder to ‘/src/main/resources/static’ folder of Kotlin SpringBoot server project.
– Using Maven plugin to copy all files from ‘dist’ folder to ‘/src/main/resources/static’ folder of SpringBoot server project.

Result

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:

Integrate-Angular-6-SpringBoot-2.0-Implement-Simple-RestAPI-Using-SpringToolSuite + angular integrate with springboot - landpage view

http://localhost:8080/api/hi, result:

Integrate-Angular-6-SpringBoot-2.0-Implement-Simple-RestAPI-Using-SpringToolSuite + angular integrate with springboot - rest api

>>> Done! Now you can start to develop Angular6 with SpringBoot & SpringToolSuite! 🙂

SourceCode

Angular6-Client
SpringBootRestAPI

By JavaSampleApproach | June 9, 2018.

Related Posts


Got Something To Say:

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

*