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:
– Open cmd, checking Node.js by commandline: node -v & npm -v:
2. Install Angular-CLI
– Using commandline npm install -g @angular/cli:
– Check Angular-CLI after setup by commandline ng -v:
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:
|
1 2 3 4 |
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> |
– Create a simple RestController:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
package com.javasampleapproach.restful.controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; @RestController public class WebRestController { @RequestMapping("/api/hi") 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:
To check angular version, go to angular4-client folder, type: ng -v:
Start angular4-client project by cmd npm start, results:
5. Import Angular4 client project to SpringToolSuite
Open SpringToolSuite, go to Import -> General -> Projects from Folder or Archieve, press Next:
Press Finish, Angular4 client is imported:
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:
Press OK. Then press Apply, result:
-> 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:
|
1 2 3 |
export class AppComponent { title = 'JavasampleApproach HelloWord Angular4 App'; } |
– Open src/app/app.component.css, add:
|
1 2 3 4 |
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:
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:
|
1 2 3 4 5 6 |
{ "/api": { "target": "http://localhost:8080", "secure": false } } |
– Edit package.json file for “start” script:
|
1 2 3 4 5 6 7 8 9 10 |
... "scripts": { "ng": "ng", "start": "ng server --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:
7. Deploy SpringBoot server with Angular4 client
Build angular4 client with command ng build --env=prod:
Result is a dist folder:
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<plugin> <artifactId>maven-resources-plugin</artifactId> <executions> <execution> <id>copy-resources</id> <phase>validate</phase> <goals><goal>copy-resources</goal></goals> <configuration> <outputDirectory>${basedir}/target/classes/static/</outputDirectory > <resources> <resource> <directory>${basedir}/../angular4-client/dist</directory > </resource> </resources> </configuration> </execution> </executions> </plugin> |
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:
– http://localhost:8080/api/hi, result:
>>> Done! Now you can start to develop Angular4 with SpringBoot and SpringToolSuite! 🙂
hello.., demo project?
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.
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
i got my project loaded into angular project index page, but no styling is applied. Otherwise the http://localhost:8080/api/hi gives me 404 error.
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!
Can we implement this approach in production environment, please help we are in the design phase of an angular 4 spring boot project
This is greatly useful.. Thank you
Please be noticed that we had made a supporting video guide: https://youtu.be/Ps-7ZV8YpI0.