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.
Angular 6:
– How to Integrate Angular 6 & SpringBoot 2.0 RestAPI – SpringToolSuite
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:
org.springframework.boot spring-boot-starter-web
– Create a simple RestController:
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:
export class AppComponent {
title = 'JavasampleApproach HelloWord Angular4 App';
}
– Open src/app/app.component.css, add:
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:
{
"/api": {
"target": "http://localhost:8080",
"secure": false
}
}
– Edit package.json file for “start” script:
...
"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.
maven-resources-plugin copy-resources validate copy-resources ${basedir}/target/classes/static/ ${basedir}/../angular4-client/dist
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 June 10, 2018.
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!
${basedir}/../angular4-client/dist
think you need to add the folder under dist in the path
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”}):
@RequestMapping(value={"/login"}) public String login(){ return "login"; }– Configure WebSecurityConfigurerAdapter:
@Configuration public class SecurityConfig extends WebSecurityConfigurerAdapter { @Override protected void configure(HttpSecurity http) throws Exception { http .authorizeRequests() .antMatchers("/","/home").permitAll() .antMatchers("/api/**") .anyRequest().authenticated() .and() .formLogin() .loginPage("/login") .permitAll() .and() .logout() .permitAll(); http.exceptionHandling().accessDeniedPage("/403"); }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.LevelPlease 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 recognizedand'npm' is not recognizedIt means you did NOT install mvn and Node.js successfully!
So open an cmd to check mvn by
mvn -vFor npm, using cmd:
node -v & npm -vto 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=prodto 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!!!!!
chunk {vendor} vendor.bundle.js (vendor) 854 kB [initial] [rendered] ERROR in Error: AppComponent cannot be used as an entry component. at syntaxError (C:\Study\Development\Workspace_SpringBoot\angular4-client\node_modules\@angular\compiler\bundles\compiler.umd.js:528:34) at CompileMetadataResolver._getEntryComponentMetadata (C:\Study\Development\Workspace_SpringBoot\angular4-client\node_modules\@angular\com piler\bundles\compiler.umd.js:15862:19) at C:\Study\Development\Workspace_SpringBoot\angular4-client\node_modules\@angular\compiler\bundles\compiler.umd.js:15334:110 at Array.map () at CompileMetadataResolver.getNgModuleMetadata (C:\Study\Development\Workspace_SpringBoot\angular4-client\node_modules\@angular\compiler\b undles\compiler.umd.js:15334:73) at visitLazyRoute (C:\Study\Development\Workspace_SpringBoot\angular4-client\node_modules\@angular\compiler\bundles\compiler.umd.js:31061: 104) at AotCompiler.listLazyRoutes (C:\Study\Development\Workspace_SpringBoot\angular4-client\node_modules\@angular\compiler\bundles\compiler.u md.js:31029:20) at AngularCompilerProgram.listLazyRoutes (C:\Study\Development\Workspace_SpringBoot\angular4-client\node_modules\@angular\compiler-cli\src \transformers\program.js:156:30) at Function.NgTools_InternalApi_NG_2.listLazyRoutes (C:\Study\Development\Workspace_SpringBoot\angular4-client\node_modules\@angular\compi ler-cli\src\ngtools_api.js:44:36) at AngularCompilerPlugin._getLazyRoutesFromNgtools (C:\Study\Development\Workspace_SpringBoot\angular4-client\node_modules\@ngtools\webpac k\src\angular_compiler_plugin.js:248:66) at Promise.resolve.then.then (C:\Study\Development\Workspace_SpringBoot\angular4-client\node_modules\@ngtools\webpack\src\angular_compiler _plugin.js:562:50) at at process._tickCallback (internal/process/next_tick.js:160:7)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,
i want to configure the Angular 4 with Spring MVC + JSON data.
Can you please tell me the step by step process for configuration.
your help highly appreciated .
Regards,
Ashish
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
Hi,
Thanks for the code.
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 :4200to find out processesThen use cmd
taskkill /PID 12716 /Fto 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=prodFor 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??
same problem of mine . is there any solution of this problem ?. if You have please share me the solution of this problem
I have followed exactly how you said, after angular4-cli production build i am running clean install in spring-boo it is copying the files to static folder, but after starting spring-boot project at http://localhost:8080 it is giving white label error
page but when i inspect the element it is showing angular4 errors in console,
==>but it is not showing welcome message at “8080”
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.
Hi,
I really appreciate the way you have created a video and prepared this tutorial is very good, i followed the same and got the expected output as well, but when I am creating simple jersey application in place of spring boot and trying to integrate the same its not working for me, can you please help.
I have followed the tutorial and there is no issues in understanding. Getting The error once I am creating a completely new spring boot application project and trying to launch it. It is giving me classnot deffound Error. I tried checking the dependencies. But could not figure. Please help me out.In STS, I am using “create a spring starter project” option and it is giving me this error, there nothing I have written extra yet.
Here is my pom.xml
4.0.0
com.sarmistha.springbootmuvi
SpringBootMuvi
0.0.1-SNAPSHOT
jar
SpringBootMuvi
Demo project for Spring Boot
org.springframework.boot
spring-boot-starter-parent
1.5.13.BUILD-SNAPSHOT
UTF-8
UTF-8
1.8
3.1.1.RELEASE
org.springframework
spring-context
${org.springframework-version}
org.springframework
spring-webmvc
org.springframework.boot
spring-boot-starter-web
org.springframework.boot
spring-boot-starter-test
test
org.springframework.boot
spring-boot-maven-plugin
4.0.0
com.sarmistha.springbootmuvi
SpringBootMuvi
0.0.1-SNAPSHOT
jar
SpringBootMuvi
Demo project for Spring Boot
org.springframework.boot
spring-boot-starter-parent
1.5.13.BUILD-SNAPSHOT
UTF-8
UTF-8
1.8
3.1.1.RELEASE
org.springframework
spring-context
${org.springframework-version}
org.springframework
spring-webmvc
org.springframework.boot
spring-boot-starter-web
org.springframework.boot
spring-boot-starter-test
test
org.springframework.boot
spring-boot-maven-plugin
I have a question, I am new to Java spring.
In my angular project if I am requesting some data from the service, so in my angular service
Eg: I have a get request
this.http.get(‘/api/getUsers’).subscribe(data => {
console.log(data);
})
So, in my spring application, in order to send the data back for the request, I do
@GetMapping(“/api/getUsers”)
private RepositoryEntity<List> listAllUsers() {
// I will get the data and return new RepositoryEntity<List>(data, HttpStatus.OK)
}
And my angular app will get the data right?
I can access http://localhost:4200/api/hi and http://localhost:8080/api/hi
However, I am unable to access http://localhost:8080
It gives a Whitelabel Error Page
can u give clarification why u r accessing two url at a time
i have an doubt why we need to delete node-module???
Hi,
very nice post.Though ive copied all the files from dist files to src/main/resources/static folder but still im not being able to connect to rest.
after inspecting i found this error:
Failed to load resource: the server responded with a status of 404 (Not Found)
and getting Whitelabel Error Page
This application has no explicit mapping for /error, so you are seeing this as a fallback.
Thanks in advance for your response
I also had the same issue with the Whitelabel Error Page but I found the mistake.
Do not copy all files from the dist folder, instead copy only the files inside dist/angular4-client so without the folder around it. Then it worked for me.
Same whitelabel error page as many people. I’ve followed all the steps one by one, and it doesn’t work.
I’ll find another way to do it.
Good to see the simple Example….
Here I have a question on refreshing page…
Consider we have an angular application with multiple routers and integrated each router with different api (one to one mapping).
for the same let consider my ui-url pattern would be like:
http://localthost:8080/application_context_name/ui-url-pattern
and it is mapped with api-url like:
http://localhost:8080/application_context_name/api/ui-url-pattern
Now the question is, how to load the ui-url-pattern directly on the browser?
(“how can i access the url “http://localthost:8080/application_context_name/ui-url-pattern” directly on browser’?)
Currently am seeing the 404 error msg, becoz both UI(angular) and API(springboot) are deployed together and serving from the same pott number, when i triggered ui-url-pattern it directly triggering the API(springboot) context path and not able to find the url pattern in all controllers and returning the 404.
How to resolve this scenario?
nice tutorial everything work fine but how to deploy same project War file to Tomcat Server with Maven build. it showing error.
This post seems helpful but I’m running into a similar issue when deployment of my spring boot and angular app. This is gradle based project. I did manually tried copying the files from dist/ directory to a static folder in src/main/resources/static folder . Then starting the spring boot app (tomcat server) , localhost:8080 isn’t showing the web interface. Any suggestions plz?
FYI, just more info for proj structure (in regards to above query in my previous comment):
src ->main -> java ->
– app
– frontend
– dist
-src
– login
-login.component.html
– login.component.ts
-login.component.css
Even though I copied manually the contents of frotend/dist into a static folder (src/main/resources/static) but the front-end web interface isnt working when starting spring boot app. Also, from above structure, you can see that I didn’t move the frontend src code anywhere and is still in frontend folder, is that an issue? Also I am using angular routers would that be a problem in routing the pages to main page?
Kindly provide suggestions.
Update Info ->
1. Video guide for Integrating Angular 6 + SpringBoot 2.x:
-> https://www.youtube.com/watch?v=fZA22_FUwDc
2. Link for Integrate Angular 6 + SpringBoot 2.x:
-> https://grokonez.com/frontend/angular/how-to-integrate-angular-6-springboot-2-0-restapi-springtoolsuite
Can you please post on how to use the angular with the spring securities?
I need to implement the front end login form is in angular 4/5/6 and on login it should authenticate via spring securities.
I am not getting any pointers. Can you please help?
Hi Pankaj Gorte,
We will try to plan time to do it in next week.
Please follow our posts and Subscribe our Mail or Youtube channel for notification.
Regards,
can any one help with how to do the same using gradle, i have the similar project structure , i need help with integration using gradle, any leads will be helpful.