How to Integrate Angular 13 & SpringBoot 2.0 RestAPI – SpringToolSuite

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

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

Spring Boot + Angular 13 example | Spring Data JPA + REST + PostgreSQL CRUD example
Spring Boot + Angular 13 example | Spring Data JPA + REST + MySQL CRUD example
Angular 13 HttpClient + Spring Boot + MariaDB example | Spring Data JPA + RestAPIs CRUD example
Spring Boot + Angular 13 example | Spring Data + REST + MongoDb CRUD example
Spring Boot + Angular 13 example | Spring Data + REST + Cassandra CRUD example

Technologies

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

Overview

Video Guide

Goal

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

– Angular 13 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 13 client to call Spring RestAPI, we get:

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

Deploy Angular 13 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 13 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:


	org.springframework.boot
	spring-boot-starter-web

RestAPI Controller
package com.javasampleapproach.angular6.restapi;

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 ozenero.com";
	}
}
Setup Angular 13 project

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

Create Angular 13 project

– Create a new Angular 13 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 13 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 13 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 13 project

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

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

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

 

Welcome to {{ title }}!

Open ‘/angular6-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 = 'Angular 13 Application';
}
Start Angular 13 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 SpringBoot RestAPI & Angular 13
Angular call SpringBoot RestAPIs

Angular6-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 angular6-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 angular6-client at port 4200.

Make a request http://localhost:4200/api/hi -> result:

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

Deploy Angular 13 with Spring Boot

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

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.


	maven-resources-plugin
	
	      
	          copy-resources
	          validate
	          copy-resources
	          
	              ${basedir}/target/classes/static/
	              
	                  
	                      ${basedir}/../angular6-client/dist/angular6-client
	                  
	              
	          
	      
	

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

108 thoughts on “How to Integrate Angular 13 & SpringBoot 2.0 RestAPI – SpringToolSuite”

  1. We’re a group of volunteers and starting a new scheme in our community. Your site offered us with useful information to paintings on. You’ve done a formidable task and our entire community will likely be thankful to you.

  2. Youre so cool! I dont suppose Ive read something like this before. So good to find anyone with some original ideas on this subject. realy thank you for starting this up. this website is one thing that’s wanted on the internet, somebody with a little bit originality. helpful job for bringing one thing new to the web!

  3. This is the correct weblog for anybody who needs to search out out about this topic. You realize a lot its nearly onerous to argue with you (not that I actually would need匟aHa). You positively put a new spin on a topic thats been written about for years. Great stuff, simply nice!

  4. Wonderful work! That is the type of info that should be shared around the web. Shame on the seek engines for now not positioning this post upper! Come on over and consult with my site . Thank you =)

  5. The subsequent time I learn a blog, I hope that it doesnt disappoint me as a lot as this one. I mean, I know it was my choice to learn, but I really thought youd have something attention-grabbing to say. All I hear is a bunch of whining about something that you could possibly repair should you werent too busy in search of attention.

  6. Hey There. I found your weblog using msn. That is an extremely well written article.
    I’ll be sure to bookmark it and come back to learn extra of your helpful information. Thank you for the post.
    I’ll definitely comeback.

  7. Hi there, i read your blog occasionally and i own a similar one and i was just curious if you get a lot of spam remarks? If so how do you reduce it, any plugin or anything you can advise? I get so much lately it’s driving me mad so any assistance is very much appreciated.|

  8. Thank you for the sensible critique. Me and my neighbor were just preparing to do a little research about this. We got a grab a book from our local library but I think I learned more clear from this post. I am very glad to see such excellent info being shared freely out there.

  9. hi!,I really like your writing so much! share we communicate
    more about your article on AOL? I need an expert on this area
    to solve my problem. Maybe that is you! Looking forward
    to peer you.

  10. Somebody essentially lend a hand to make seriously articles I might state. That is the first time I frequented your website page and to this point? I surprised with the research you made to create this actual submit amazing. Excellent task!|

  11. But wanna input on few general things, The website pattern is perfect, the content is very excellent. “Good judgment comes from experience, and experience comes from bad judgment.” by Barry LePatner.

  12. you are really a just right webmaster. The web site loading pace is amazing. It sort of feels that you’re doing any unique trick. Furthermore, The contents are masterwork. you have performed a magnificent process in this subject!

  13. What i do not understood is actually how you’re no longer actually much more neatly-liked than you may be right now. You’re very intelligent. You recognize therefore significantly with regards to this topic, produced me personally imagine it from so many various angles. Its like women and men don’t seem to be involved unless it’s something to accomplish with Woman gaga! Your individual stuffs great. Always care for it up!

  14. Great post. I used to be checking constantly this weblog and I’m inspired!
    Extremely helpful information specifically the final
    phase 🙂 I deal with such info much. I used to be looking for
    this certain information for a long time. Thanks and good
    luck.

  15. Interesting blog! Is your theme custom made or did you download it from somewhere? A design like yours with a few simple adjustements would really make my blog stand out. Please let me know where you got your theme. Bless you|

  16. You could certainly see your enthusiasm in the paintings you write. The arena hopes for even more passionate writers like you who aren’t afraid to say how they believe. Always go after your heart. “The point of quotations is that one can use another’s words to be insulting.” by Amanda Cross.

  17. I just could not depart your site before suggesting that I actually loved the usual info an individual supply in your visitors? Is going to be back incessantly in order to inspect new posts.

  18. I like what you guys are up too. Such smart work and reporting! Keep up the superb works guys I have incorporated you guys to my blogroll. I think it’ll improve the value of my web site :).

  19. Very interesting info !Perfect just what I was looking for! “It’s not the having, its the getting.” by Elizabeth Taylor.

  20. I genuinely enjoy looking through on this internet site, it holds excellent blog posts. “Never fight an inanimate object.” by P. J. O’Rourke.

  21. I truly appreciate this post. I have been looking everywhere for this! Thank goodness I found it on Bing. You’ve made my day! Thank you again!

  22. I will right away clutch your rss as I can’t in finding your e-mail subscription link or newsletter service. Do you’ve any? Please permit me recognise so that I may just subscribe. Thanks.

  23. I was reading through some of your blog posts on this website and I believe this web site is rattling instructive! Keep on putting up.

  24. you’re in point of fact a good webmaster. The site loading pace is incredible. It kind of feels that you’re doing any unique trick. Furthermore, The contents are masterwork. you have done a excellent task in this subject!

  25. Hello, Neat post. There is a problem together with your web site in web explorer, would check this… IE still is the market leader and a big portion of other people will leave out your fantastic writing due to this problem.

  26. I like what you guys are up also. Such smart work and reporting! Keep up the superb works guys I’ve incorporated you guys to my blogroll. I think it’ll improve the value of my website :).

  27. Hello, Neat post. There is an issue along with your web site in web explorer, would check this… IE still is the marketplace leader and a huge portion of folks will omit your great writing because of this problem.

  28. I have been absent for a while, but now I remember why I used to love this blog. Thanks, I’ll try and check back more often. How frequently you update your web site?

  29. Thank you for the sensible critique. Me and my neighbor were just preparing to do a little research on this. We got a grab a book from our local library but I think I learned more from this post. I am very glad to see such excellent information being shared freely out there.

  30. Usually I do not learn article on blogs, however I would like to say that this write-up very forced me to take a look at and do it! Your writing style has been amazed me. Thanks, very great post.

  31. Hey very cool website!! Guy .. Excellent .. Amazing .. I will bookmark your blog and take the feeds additionally…I’m satisfied to find numerous useful information right here within the submit, we want develop extra strategies on this regard, thank you for sharing.

  32. Hi, Neat post. There’s a problem with your website in internet explorer, might test this… IE nonetheless is the market chief and a huge portion of folks will pass over your great writing because of this problem.

  33. naturally like your web-site however you need to test the spelling on several of your posts. Several of them are rife with spelling problems and I in finding it very troublesome to tell the truth however I’ll certainly come again again.

  34. Excellent read, I just passed this onto a friend who was doing some research on that. And he actually bought me lunch because I found it for him smile Therefore let me rephrase that: Thanks for lunch! “The future is not something we enter. The future is something we create.” by Leonard I. Sweet.

  35. Thank you, I’ve recently been searching for info about this subject for a long time and yours is the best I’ve discovered till now. However, what in regards to the bottom line? Are you sure in regards to the supply?

  36. Just wanna remark on few general things, The website design and style is perfect, the content is real great. “The idea of God is the sole wrong for which I cannot forgive mankind.” by Marquis de Sade.

  37. Someone essentially assist to make severely posts I would state. This is the first time I frequented your website page and up to now? I surprised with the research you made to make this particular post amazing. Wonderful process!

  38. You can certainly see your enthusiasm within the work you write. The sector hopes for even more passionate writers like you who are not afraid to say how they believe. Always follow your heart. “In order to preserve your self-respect, it is sometimes necessary to lie and cheat.” by Robert Byrne.

  39. Hello, Neat post. There is an issue with your web site in web explorer, would check this… IE still is the market chief and a good component of other people will omit your fantastic writing due to this problem.

  40. I like what you guys are up too. Such smart work and reporting! Keep up the superb works guys I have incorporated you guys to my blogroll. I think it’ll improve the value of my site :).

  41. I do believe all the ideas you’ve presented to your post. They’re really convincing and can certainly work. Nonetheless, the posts are too quick for newbies. May you please lengthen them a bit from subsequent time? Thank you for the post.

  42. I’ve been browsing on-line more than three hours lately, but I by no means found any attention-grabbing article like yours. It is pretty price sufficient for me. In my opinion, if all webmasters and bloggers made just right content as you did, the internet will be a lot more helpful than ever before. “I finally realized that being grateful to my body was key to giving more love to myself.” by Oprah Winfrey.

  43. I just couldn’t leave your web site prior to suggesting that I actually loved the standard information an individual supply on your guests? Is going to be again continuously in order to investigate cross-check new posts.

  44. Good – I should certainly pronounce, impressed with your site. I had no trouble navigating through all tabs and related info ended up being truly easy to do to access. I recently found what I hoped for before you know it at all. Quite unusual. Is likely to appreciate it for those who add forums or anything, web site theme . a tones way for your client to communicate. Excellent task.

  45. Thank you for sharing excellent informations. Your web-site is so cool. I’m impressed by the details that you’ve on this site. It reveals how nicely you understand this subject. Bookmarked this web page, will come back for more articles. You, my friend, ROCK! I found just the info I already searched everywhere and just could not come across. What a perfect web site.

  46. What i don’t understood is if truth be told how you are now not actually a lot more well-favored than you might be right now. You’re so intelligent. You understand thus significantly in relation to this subject, made me individually consider it from a lot of various angles. Its like women and men aren’t involved until it is something to accomplish with Woman gaga! Your individual stuffs outstanding. Always care for it up!

  47. You can definitely see your skills in the paintings you write. The sector hopes for more passionate writers like you who aren’t afraid to mention how they believe. All the time follow your heart. “The point of quotations is that one can use another’s words to be insulting.” by Amanda Cross.

  48. What i don’t realize is in truth how you are now not really much more neatly-appreciated than you may be now. You are so intelligent. You know therefore significantly in the case of this matter, produced me individually consider it from numerous numerous angles. Its like women and men don’t seem to be fascinated until it’s something to accomplish with Girl gaga! Your individual stuffs outstanding. All the time maintain it up!

  49. I have recently started a web site, the information you offer on this website has helped me tremendously. Thank you for all of your time & work. “There is a time for many words, and there is also a time for sleep.” by Homer.

  50. certainly like your web site however you need to check the spelling on quite a few of your posts. Several of them are rife with spelling problems and I to find it very bothersome to inform the reality nevertheless I will surely come back again.

  51. Excellent read, I just passed this onto a friend who was doing some research on that. And he actually bought me lunch since I found it for him smile So let me rephrase that: Thank you for lunch!

Leave a Reply

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