How to integrate Angular 4 with SpringBoot RestApi using SpringToolSuite

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

Angular 6:
How to Integrate Angular 6 & SpringBoot 2.0 RestAPI – SpringToolSuite

Related articles:
How to configure AngularJs with Spring MVC | SpringBoot
How to integrate Http Angularjs with Spring MVC | Spring Boot
How to setup Angular IDE with Spring Tool Suite
How to use Angular Http Client to fetch Data from SpringBoot RestAPI – Angular 4
How to use Angular HttpClient to POST, PUT, DELETE data on SpringBoot Rest APIs – Angular 4
Angular 4 + Spring JPA + PostgreSQL example | Angular 4 Http Client – Spring Boot RestApi Server
Angular 4 + Spring JPA + MySQL example | Angular 4 Http Client – Spring Boot RestApi Server

I. Technologies

– Java 1.8
– Maven 3.3.9
– Spring Tool Suite – Version 3.8.1.RELEASE
– Spring Boot: RELEASE
– Angular 4
– Node.js

II. Integrate Angular 4 with Spring Boot WebApp and SpringToolSuite

1. Install Node.js for Angular

Firstly, checking whether or not you have Node.js installed, by command: node -v & npm -v. If the command goes unrecognized, we must install Node.js.
– Go to: Download Node.js installer, the tutorial uses version: v7.10.0. We got a node-v7.10.0-x64.msi file, double click on it and follow the guides to setup Node.js, successfully result:

angular4 - springboot springtoolsuite - install nodejs

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

angular4 - springboot springtoolsuite - check nodejs

2. Install Angular-CLI

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

angular4 - springboot springtoolsuite - install Angular-CLI

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

angular4 - springboot springtoolsuite - install Angular-CLI - check angular cli

The CLI will install an Angular 4 project by default from March 24, 2017, no need specify the “–ng4” flag.

3. Setup SpringBoot Web server project

– Using SpringToolSuite, create a simple SpringBoot Restful Webservice. Open pom.xml file, add web dependency:


– Create a simple RestController:

package com.javasampleapproach.restful.controller;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

public class WebRestController {

	public String hi() {
		return "Hello World from Restful API";
4. Create Angular 4 client project

Location of the SpringBoot project at: C:\Users\User\workspace\SpringBootAngular4.
Now, open cmd, cd to C:\Users\User\workspace\".
– Start a new angular 4 project by commandline: ng new angular4-client:

angular4 - springboot springtoolsuite - install Angular4-client

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

angular4 - springboot springtoolsuite - install Angular4-client - version

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

angular4 - springboot springtoolsuite - start Angular4-client

angular4 - springboot springtoolsuite - Angular4-client - working

5. Import Angular4 client project to SpringToolSuite

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

import angular4 client to springtoolsuite

Press Finish, Angular4 client is imported:

angular4 client project

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

angular4 client - exclude node_modules

Press OK. Then press Apply, result:

angularjs4 client after filter node_modules

-> Now node_modules is already removed from the SpringToolSuite.

It’s ready to modify something with Angular4-client project:
– Open /src/app/app.component.ts, edit:

export class AppComponent {
  title = 'JavasampleApproach HelloWord Angular4 App';

– Open src/app/app.component.css, add:

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

Now, start angular4-client project with STS:
– Go to Window -> Show View -> Other, search and choose Terminal.
– Then launch a Local Terminal, cd to C:\Users\User\workspace\angular4-client. Press command npm start to launch the angular4-client, results:

start angular4 client with STS terminal

angular4 app after some edit

6. Integrate SpringBoot server and Angular 4 client

Up to now, Angular4-Client and SpringBoot server work independently on ports 8080 and 4200.
Goal of below integration: the client at 4200 will proxy any /api requests to the server.

Step to do:
– Create a file proxy.conf.json under project angular4-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 RestfulService project with SpringBoot App mode at port 8080. And run angular4-client at port 4200.
Make a request http://localhost:4200/api/hi, result:

result - angular4 client proxy server

7. Deploy SpringBoot server with Angular4 client

Build angular4 client with command ng build --env=prod:

Result is a dist folder:

build angular4 client - result

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



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:

springboot service - home after deployment with angular4

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

after deploy angular4 and backend service

>>> Done! Now you can start to develop Angular4 with SpringBoot and SpringToolSuite! 🙂

95 thoughts on “How to integrate Angular 4 with SpringBoot RestApi using SpringToolSuite”

  1. Hi I have been going through the steps and copied it but do not get loaded into angular project index page; get a white error page.

    1. Hi,

      Had you met the problem at step 7: Deploy SpringBoot server with Angular4 client?

      Here, We have 2 approaches to deployment Spring Boot server with angular4 client:
      1. Manually copy all files from dist folder to /src/main/resources/static folder of SpringBoot server project.
      2. Using Maven plugin to copy all files from dist folder to /src/main/resources/static folder of SpringBoot server project.

      I think you have mistake with approach 2, So please double check the ${basedir}, or replace it with the absolute path for double checking,



        1. Hi Jam,

          I see you had met the same mistakes with other guys!
          Be careful when doing each steps on the tutorial!

          See the above comment: mistakes at step 7 or adding ../angular4-client/dist ! I think it helps you!

          Good Luck!

  2. Can we implement this approach in production environment, please help we are in the design phase of an angular 4 spring boot project

    1. Thanks a lot. It’s very useful. Please provide any link for a CRUD application in the same architecture using single port

  3. Hi There,

    Hi There Angular 4 project is running on Spring boot now.
    Can you advice me how can I integrate it with Spring Security?

    If I give in configure method that authenticate (/**) , then it should go to login page which angular 4 is made and authenticate the credentials using spring security, how can I achieve this?


    1. Hello Lokesh,

      For security, You can follow the guide of tutorial:
      Spring Security – Config Security for Web MVC by Spring Boot

      – Add security dependency:


      – Define a customize login.html page and use a @RequestMapping(value={“/login”}):

      public String login(){
         return "login";

      – Configure WebSecurityConfigurerAdapter:

      public class SecurityConfig extends WebSecurityConfigurerAdapter {
          protected void configure(HttpSecurity http) throws Exception {

      Please let me know if you done!


  4. Hi

    I speak French so sorry for my English.
    I have some problems when I want to launch starter project with spring boot app.
    I’m on mac os.

    I have this error :

    SLF4J: Failed to load class "org.slf4j.impl.StaticLoggerBinder".
    SLF4J: Defaulting to no-operation (NOP) logger implementation
    SLF4J: See for further details.
    Exception in thread "main" java.lang.NoClassDefFoundError: ch/qos/logback/classic/Level
    	at org.springframework.boot.logging.logback.LogbackLoggingSystem.(
    	at sun.reflect.NativeConstructorAccessorImpl.newInstance0(Native Method)
    	at sun.reflect.NativeConstructorAccessorImpl.newInstance(
    	at sun.reflect.DelegatingConstructorAccessorImpl.newInstance(
    	at java.lang.reflect.Constructor.newInstance(
    	at org.springframework.boot.logging.LoggingSystem.get(
    	at org.springframework.boot.logging.LoggingSystem.get(
    	at org.springframework.boot.logging.LoggingApplicationListener.onApplicationStartingEvent(
    	at org.springframework.boot.logging.LoggingApplicationListener.onApplicationEvent(
    	at org.springframework.context.event.SimpleApplicationEventMulticaster.doInvokeListener(
    	at org.springframework.context.event.SimpleApplicationEventMulticaster.invokeListener(
    	at org.springframework.context.event.SimpleApplicationEventMulticaster.multicastEvent(
    	at org.springframework.context.event.SimpleApplicationEventMulticaster.multicastEvent(
    	at org.springframework.boot.context.event.EventPublishingRunListener.starting(
    	at org.springframework.boot.SpringApplicationRunListeners.starting(
    	at com.example.demo.Angularstarterproject1Application.main(
    Caused by: java.lang.ClassNotFoundException: ch.qos.logback.classic.Level
    	at java.lang.ClassLoader.loadClass(
    	at sun.misc.Launcher$AppClassLoader.loadClass(
    	at java.lang.ClassLoader.loadClass(
    	... 19 more
    1. What’s your STS version?

      Your error is clear: java.lang.ClassNotFoundException: ch.qos.logback.classic.Level

      Please base on it for tracking!

      1. hi,
        my version of STS is 3.9.0.RELEASE.

        i just create the project and start with spring boot app.
        i dont understand why log4j make some problems, i dont use it

  5. hi ,
    i just follow the tuto but im blocked in step 6 , the server turn with angular but when i try to run the SpringBootAngular i get this error
    “”” Exception in thread “main” java.lang.NoClassDefFoundError: org/springframework/util/ClassUtils “””
    any help 🙂

    1. Hi,

      The problem is related with your development environment for creating a SpringBoot project.

      So you can double check your STS version, then re-create a new SpringBoot project with simple “Hello world” RestController.

    1. Hi Rubysavach,

      What step in the tutorial do you mention that suites for your case?

      Please give me the way Angular’s client can know what ‘/apis’ of servers (ip + port) for calling without proxy.conf.json file, Rubysavach?


  6. I have the following error on the local terminal:

    'mvn' is not recognized as an internal or external command,
    operable program or batch file.

    And also:

    C:\Users\jwm19_000\Documents\STS\angular4-client>npm start
    'npm' is not recognized as an internal or external command,
    operable program or batch file.

    What I am doing wrong?

    1. Hi Justin,

      Your problem is related with your mvn setting and npm setting in STS.
      Please double check it!


      1. I see, do you know what the settings should be? I thought I followed your instructions, but I could have missed something. Where should I go in STS and what should I change? Thank you.

        1. You got 2 messages: 'mvn' is not recognized and 'npm' is not recognized
          It means you did NOT install mvn and Node.js successfully!

          So open an cmd to check mvn by mvn -v
          For npm, using cmd: node -v & npm -v to check it.

          1. So I need to download maven? Do you recommend a site/version? I tried a version, but my computer warned me it might have a virus. Just wanted your opinion. Thank you.

          2. I have tried to follow the step by step instructions for installing on Windows, but they do not make sense to me. Is there a video I can follow? I have tried everything, but nothing I do works.

          3. I finally got mvn to work properly, thank you for all of your help, but now I am getting the following message when I run the ng build command:

            ‘ng’ is not recognized as an internal or external command,
            operable program or batch file.

            Please keep in mind, I cannot run it in the local terminal on STS and I am running it on cmd terminal. What do I need to do to get the ng build command to run?

  7. Hey.. when I go in production environment with this setup.. will it work..Or I need to change something in proxy.conf.json?

    1. Hi Scotte,

      In production env, you just need copy all files in dist folder from cmd ng build --env=prod.


  8. I copied the dist folder as mentioned in step 7 but still I am getting error -“Whitelabel Error Page ” when i load the pag e on local host.

    Any help will be appreciated

    1. Hi Madhuri,

      Had you done with the step 6:
      Integrate SpringBoot server and Angular 4 client

      – If your app works well at step 6, please use cmd: ng build --env=prod to build a production image then:

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

      See more at video


  9. chunk {vendor} vendor.bundle.js (vendor) 854 kB [initial] [rendered]
    ERROR in Error: AppComponent cannot be used as an entry component.
        at syntaxError (C:\Study\Development\Workspace_SpringBoot\angular4-client\node_modules\@angular\compiler\bundles\compiler.umd.js:528:34)
        at CompileMetadataResolver._getEntryComponentMetadata (C:\Study\Development\Workspace_SpringBoot\angular4-client\node_modules\@angular\com
        at C:\Study\Development\Workspace_SpringBoot\angular4-client\node_modules\@angular\compiler\bundles\compiler.umd.js:15334:110
        at ()
        at CompileMetadataResolver.getNgModuleMetadata (C:\Study\Development\Workspace_SpringBoot\angular4-client\node_modules\@angular\compiler\b
        at visitLazyRoute (C:\Study\Development\Workspace_SpringBoot\angular4-client\node_modules\@angular\compiler\bundles\compiler.umd.js:31061:
        at AotCompiler.listLazyRoutes (C:\Study\Development\Workspace_SpringBoot\angular4-client\node_modules\@angular\compiler\bundles\compiler.u
        at AngularCompilerProgram.listLazyRoutes (C:\Study\Development\Workspace_SpringBoot\angular4-client\node_modules\@angular\compiler-cli\src
        at Function.NgTools_InternalApi_NG_2.listLazyRoutes (C:\Study\Development\Workspace_SpringBoot\angular4-client\node_modules\@angular\compi
        at AngularCompilerPlugin._getLazyRoutesFromNgtools (C:\Study\Development\Workspace_SpringBoot\angular4-client\node_modules\@ngtools\webpac
        at Promise.resolve.then.then (C:\Study\Development\Workspace_SpringBoot\angular4-client\node_modules\@ngtools\webpack\src\angular_compiler
        at process._tickCallback (internal/process/next_tick.js:160:7)

    webpack: Failed to compile.

  10. After implementing all the steps given in this tutorial, I thought of completing it by creating a WAR file, and the steps followed are,
    1) Modified pom.xml by replacing jar to war
    2) mvn spring-boot:run created a WAR file
    3) Copied that WAR file to C:\Program Files\Apache Software Foundation\Tomcat 8.0\webapps and tried running
    a) http://localhost:8080/demo/api/hi
    b) http://localhost:8080/demo
    But none of these two attempts (ie,a,b) worked for me. Is there any thing that I need to do as we do in JSP-Servlet web.xml? Where we create a and xml tags where in we place the jsp file to be loaded i,e


    Can any one please tell me the right procedure to create a WAR file and deploy it into a remote tomcat webapp folder ?

  11. Hi,
    i want to configure the Angular 4 with Spring MVC + JSON data.
    Can you please tell me the step by step process for configuration.
    your help highly appreciated .


  12. Hi,
    Thank you for this great job 🙂 . Just one question in the last step (7). Does this mean that, every time I make some changes in the angular client, I have to run “ng build –env=prod” before starting my Spring Boot app? If this is the case, is there a way to make it automatically, a maven plugin which will start the angular client when my Spring Boot app starts ? Thanks again

  13. Done till step 6. getting the following error
    > ng serve –proxy-config proxy.conf.json

    Port 4200 is already in use. Use ‘–port’ to specify a different port.
    npm ERR! code ELIFECYCLE
    npm ERR! errno 1
    npm ERR! angular4-client@0.0.0 start: `ng serve –proxy-config proxy.conf.json`
    npm ERR! Exit status 1
    npm ERR!
    npm ERR! Failed at the angular4-client@0.0.0 start script.
    npm ERR! This is probably not a problem with npm. There is likely additional log
    ging output above.

    npm ERR! A complete log of this run can be found in:

    1. Hi Nitin Jain,

      Use cmd netstat -ano | findstr :4200 to find out processes
      Then use cmd taskkill /PID 12716 /F to kill processes


  14. This site explains the concept and video to demonstrate the same is simply awesome. (Y)

    I have followed all the steps and successfully integrated my project but cannot deploy to get it run on one server.
    According to step 7, when I give command ng build -prod in the terminal, ng is not recognized.
    I have installed the angular plugins in my STS but even that didn’t help.

    Please suggest.

  15. Where did this dist folder came from? As we see in steps untill step 6 we dont see this folder. How it came in step 7?

  16. Hi . i have problem.
    How to fixed page?
    when i fixed html code and AppComponent title , i don’t check change display

  17. I went through all these steps and was able to run the application successfully. But when I refreshed the page using browser refresh button, it gave the “Whitelabel Error Page”.

  18. Hi team,
    Nice Work though I am facing issues. Up to step 6, I did all the steps but “localhost:4200” and “http://localhost:4200/api/hi” is redirecting to the same angular page, not to controller page. Any idea about the issue, I need to resolve it asap??

    1. same problem of mine . is there any solution of this problem ?. if You have please share me the solution of this problem

  19. I have followed exactly how you said, after angular4-cli production build i am running clean install in spring-boo it is copying the files to static folder, but after starting spring-boot project at http://localhost:8080 it is giving white label error
    page but when i inspect the element it is showing angular4 errors in console,

    ==>but it is not showing welcome message at “8080”

  20. This is about “Whitelabel Error Page” after integration in both side (angular and spring boot)
    1. start the spring boot application
    2. try again 7. Deploy SpringBoot server with the Angular4 client – check dist folder is present
    3. Give absolute path, if you are not familiar with relative path –
    4. Check the absolute path is present exactly, some time static folder will not be there, then create
    5. try to execute localhost:8080, if not working then try to stop and start the spring boot
    8. don’t try clean install in maven.

  21. Hi,

    I really appreciate the way you have created a video and prepared this tutorial is very good, i followed the same and got the expected output as well, but when I am creating simple jersey application in place of spring boot and trying to integrate the same its not working for me, can you please help.

  22. I have followed the tutorial and there is no issues in understanding. Getting The error once I am creating a completely new spring boot application project and trying to launch it. It is giving me classnot deffound Error. I tried checking the dependencies. But could not figure. Please help me out.In STS, I am using “create a spring starter project” option and it is giving me this error, there nothing I have written extra yet.
    Here is my pom.xml



    Demo project for Spring Boot








    1. 4.0.0


      Demo project for Spring Boot








  23. I have a question, I am new to Java spring.

    In my angular project if I am requesting some data from the service, so in my angular service
    Eg: I have a get request
    this.http.get(‘/api/getUsers’).subscribe(data => {

    So, in my spring application, in order to send the data back for the request, I do
    private RepositoryEntity<List> listAllUsers() {
    // I will get the data and return new RepositoryEntity<List>(data, HttpStatus.OK)

    And my angular app will get the data right?

  24. Hi,
    very nice post.Though ive copied all the files from dist files to src/main/resources/static folder but still im not being able to connect to rest.
    after inspecting i found this error:
    Failed to load resource: the server responded with a status of 404 (Not Found)

    and getting Whitelabel Error Page
    This application has no explicit mapping for /error, so you are seeing this as a fallback.
    Thanks in advance for your response

    1. I also had the same issue with the Whitelabel Error Page but I found the mistake.
      Do not copy all files from the dist folder, instead copy only the files inside dist/angular4-client so without the folder around it. Then it worked for me.

  25. Same whitelabel error page as many people. I’ve followed all the steps one by one, and it doesn’t work.

    I’ll find another way to do it.

  26. Good to see the simple Example….
    Here I have a question on refreshing page…

    Consider we have an angular application with multiple routers and integrated each router with different api (one to one mapping).
    for the same let consider my ui-url pattern would be like:
    and it is mapped with api-url like:

    Now the question is, how to load the ui-url-pattern directly on the browser?
    (“how can i access the url “http://localthost:8080/application_context_name/ui-url-pattern” directly on browser’?)

    Currently am seeing the 404 error msg, becoz both UI(angular) and API(springboot) are deployed together and serving from the same pott number, when i triggered ui-url-pattern it directly triggering the API(springboot) context path and not able to find the url pattern in all controllers and returning the 404.

    How to resolve this scenario?

  27. nice tutorial everything work fine but how to deploy same project War file to Tomcat Server with Maven build. it showing error.

  28. This post seems helpful but I’m running into a similar issue when deployment of my spring boot and angular app. This is gradle based project. I did manually tried copying the files from dist/ directory to a static folder in src/main/resources/static folder . Then starting the spring boot app (tomcat server) , localhost:8080 isn’t showing the web interface. Any suggestions plz?

  29. FYI, just more info for proj structure (in regards to above query in my previous comment):
    src ->main -> java ->
    – app
    – frontend
    – dist
    – login
    – login.component.ts

    Even though I copied manually the contents of frotend/dist into a static folder (src/main/resources/static) but the front-end web interface isnt working when starting spring boot app. Also, from above structure, you can see that I didn’t move the frontend src code anywhere and is still in frontend folder, is that an issue? Also I am using angular routers would that be a problem in routing the pages to main page?
    Kindly provide suggestions.

  30. Can you please post on how to use the angular with the spring securities?
    I need to implement the front end login form is in angular 4/5/6 and on login it should authenticate via spring securities.
    I am not getting any pointers. Can you please help?

    1. Hi Pankaj Gorte,

      We will try to plan time to do it in next week.
      Please follow our posts and Subscribe our Mail or Youtube channel for notification.


  31. can any one help with how to do the same using gradle, i have the similar project structure , i need help with integration using gradle, any leads will be helpful.

  32. I’m not sure why but this weblog is loading extremely slow for me.
    Is anyone else having this issue or is it a issue on my end?

    I’ll check back later and see if the problem still exists.

  33. Simply desire to say your article is as surprising. The clearness in your post is just excellent and i could assume you are an expert on this subject.

    Well with your permission let me to grab your RSS feed to keep
    up to date with forthcoming post. Thanks a million and please
    keep up the gratifying work.

  34. You really make it seem so easy along with your presentation however I to find this matter to be really one thing that I feel I would never understand. It sort of feels too complicated and very wide for me. I’m taking a look ahead for your next post, I will try to get the grasp of it!

  35. certainly like your web-site but you need to check the spelling on quite a few of your posts. A number of them are rife with spelling issues and I find it very bothersome to tell the truth nevertheless I will certainly come back again.

  36. There are some fascinating cut-off dates on this article but I don’t know if I see all of them heart to heart. There is some validity but I’ll take hold opinion till I look into it further. Good article , thanks and we want extra! Added to FeedBurner as properly

Leave a Reply

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