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:
– 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 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:
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! 🙂
Last updated on October 20, 2017.
hello.., demo project?
nice to build 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.
Thanks a lot. It’s very useful. Please provide any link for a CRUD application in the same architecture using single port
Hello! I can’t import the angular project in the latest STS.
The project is not shown in the import dialog… Any guess?
Please give me your STS version?
Or You can try using STS Version 3.8.1.RELEASE.
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
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,
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 :
What’s your STS version?
Your error is clear:
java.lang.ClassNotFoundException: ch.qos.logback.classic.Level
Please base on it for tracking!
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
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 🙂
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.
I think we don’t need a proxy.conf.json file…it’s working fine for me..
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,
Thank you very much.
I have learned a lot with your few valuable steps and line.
I have the following error on the local terminal:
—
And also:
What I am doing wrong?
Hi Justin,
Your problem is related with your mvn setting and npm setting in STS.
Please double check it!
Regards,
JSA
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.
What should the settings be?
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.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.
You can download mvn at: Download Apache Maven.
Then follow the install step by step at Installing Apache Maven.
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.
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?
Hey.. when I go in production environment with this setup.. will it work..Or I need to change something in proxy.conf.json?
Hi Scotte,
In production env, you just need copy all files in dist folder from cmd
ng build --env=prod
.Regards,
JSA
I am not sure what that means? Which files? And what’s the production envelope? I am sorry if I seem confused.
Spring Boot + Jboss EAP 6.4
is posible?
Hello Anonimo,
Please details for clearly your expected.
Regards,
JSA
Yes, its possible, i using that.
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
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
Thanks for the awesome ! post.
It’s a best example ive ever seen. Thank you!!!!!
webpack: Failed to compile.
Hello Sunil Roy,
Please check the guide video for your setup: https://youtu.be/Ps-7ZV8YpI0
Regards,
JSA
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 ?
Hi Kiran,
Please visit this post:
How to deploy Spring Boot Web App War file to Tomcat Server with Maven build
Regards,
JSA.
It is the best video I have ever seen.
Just curious, in Step 5, why do you remove node_modules from STS?
Dear Wallace Howery,
Just to clean the sourcecode in STS on view. You can do nothing.
Regards,
JSA
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
hello i am getting blank page when using http://localhost:8080/
any idea???
Thanks man for good tutorial ! 😉
Best gret from POLAND! 😉
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:
Hi Nitin Jain,
Use cmd
netstat -ano | findstr :4200
to find out processesThen use cmd
taskkill /PID 12716 /F
to kill processesJSA,
Regards
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.
Hi Tarishi,
At step 7, you should use
ng build --env=prod
For new updated, you can follow the instruction at the tutorial
Regards,
JSA
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?
Yeah i have don it. Its very easy and simple. TX
Hi . i have problem.
How to fixed page?
when i fixed html code and AppComponent title , i don’t check change display
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”.
I too get the same problem when I refresh the page.
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??
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.