How to integrate Angular 4 with SpringBoot Web App and 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

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



5 thoughts on “How to integrate Angular 4 with SpringBoot Web App and 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!

Got Something To Say:

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

*