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


Related Posts


20 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

  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,

Got Something To Say:

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

*