Integrate Spring4MVC With Angular on One Server: Easy Tutorial

TL;DR – Learn how to run Spring4MVC with Angular on a single server. Follow our step-by-step guide for seamless integration.

No perfect solution till now ? thats fine! I got solution. I will show you How I did!

Note: This trick will work for Angular 2/4/5/6/7/8/9/10/11 versions.

You need 2 contexts as frontend and backend.

1. Angular 2 project 
2. Spring MVC

Follow below steps to achieve our main goal, to run SPRINGMVC + Angular on a single server.

1. Create normal Dynamic web project.
2. Add all dependancy required for spring or user maven pom.xml
3. Open CMD, navigate to angular2 application. Hit command.

npm install

and then

ng build or use ng build

Use ng build –prod for production build.
This command will create a “dist” folder, copy all files including all folders.

4. Paste those files and folders into WebContent directory.
5. Last thing, you need to change basehref=”./” in index.html.

It contains details about File structure for Spring4MVC with Angular.

– Now you are ready to run server or you can deploy war file and serve it with tomcat or other servers.
If you are using Rest webservices and want to run angular2 and spring in a single server, You need to put webServiceEndPointUrl as per your host url. For example, If you are running app on localhost:8080, you need to keep url
webServiceEndPointUrl= “http://localhost:8080/api/user”; at angular side. After that you can build and copy paste to your WebContent folder.

I know there are many drawbacks to use these way for running application on a single server, but if it must required you can follow this.

If you change anything at angular side, you need to build and copy-paste dist folder all time and then you can deploy it!

Visit : Run Spring4MVC with Angular 2 on a single server, I have mentioned file structure

I know there are many drawbacks to use these way for running application on a single server, but if it must required you can follow this.

If you change anything at angular side, you need to copy paste dist folder all time and then you can deploy it!

Download or clone example : Github, You can fork and star repository.

#Edit-1 (24th Mar, 2017):

In Angular, You can keep basehref=”./” by default. While building project (as dev/prod build) it will keep ./ in index.html as it is. Previously it was not working like that thing.

If you are running your angular app on lets say localhost:4200 then it will refer basehref=”/” you can find basehref attribute in src/app/index.html . Now if you want to run this with springMVC (normal configurations * pattern), you will put all files of dist folder to webapps or WebContent folder. Here you need to say from where spring can start rendering. [(dot-slash)./ means the current directory] [(slash) / is the root directory]. If you have another configurations, you may skip it. In general architecture I have tried and implemented successfully. Even you can try with / and ./

If you find joy and value in what I do, please consider supporting my work with a donation — however much you can afford, it means and helps more than you can imagine.

You can give tips too using Buy me a coffee.

Note: This trick will work for Angular 2/4/5/6/7/8/9/10/11 versions.

You may also like,

• JHipster Tutorials: Learn Everything You Need to Know
• JdbcTemplate Querying Spring — Java