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.

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: nodejs.org. 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:

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:

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

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:

– Edit package.json file for “start” script:

– 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! 🙂

By JavaSampleApproach | May 15, 2017.

Last updated on October 20, 2017.


Related Posts


62 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,

      Regards,
      JSA

        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?

    Regards
    Lokesh

    1. Hello Lokesh,

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

      Details:
      – Add security dependency:

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

      – Configure WebSecurityConfigurerAdapter:

      Please let me know if you done!

      Regards,

  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 :

    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?

      Regards,

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

    And also:

    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!

      Regards,
      JSA

      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.

      Regards,
      JSA

  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 https://youtu.be/Ps-7ZV8YpI0

      Regards,
      JSA

  9. 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

    /jsp/login.jsp

    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,
    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

  12. 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

      JSA,
      Regards

  13. 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.

  14. 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?

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

  16. 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”.

  17. 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??

  18. 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.

Got Something To Say:

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

*