Configuring angular 2 with spring mvc project without spring boot

Question

I am configuring spring mvc project to use angular 2 without spring boot.

my directory structure is :

Project
 |
 +--src
 |
 +--resources
 |     |
 |     +--css
 |     |
 |     +--js
 |     |
 |     +--angular
 |          |
 |          +--app/
 |          |
 |          +--node_modules/
 |          |
 |          +--package.json,systemjs.config.js,tsconfig.json
 |           
 |
 +--WEB-INF
      |
      +--pages
           |
           +--index.jsp

I have included the follwing lines in index.jsp

<!-- 1. Load libraries for angular 2 setup -->
    <!-- Polyfill(s) for older browsers -->
    <script src="${pageContext.request.contextPath}/resources/angular/node_modules/core-js/client/shim.min.js"></script>
    <script src="${pageContext.request.contextPath}/resources/angular/node_modules/zone.js/dist/zone.js"></script>
    <script src="${pageContext.request.contextPath}/resources/angular/node_modules/reflect-metadata/Reflect.js"></script>
    <script src="${pageContext.request.contextPath}/resources/angular/node_modules/systemjs/dist/system.src.js"></script>
    <!-- 2. Configure SystemJS -->
    <script src="${pageContext.request.contextPath}/resources/angular/systemjs.config.js"></script>
    <script>
        System.import('${pageContext.request.contextPath}/resources/angular/app').catch(function(err){ console.error(err); });
    </script>

I have followed the angular 2 quick start

https://angular.io/guide/quickstart

All the files contain the same code mentioned in the above link. The only thing i have changed is: Copied app directory, node_modules directory and configuration files to resources directory and modified index.jsp to load it from there.

It is throwing the following exception:

GET http://localhost:8085/Phoenix/resources/angular/app/ 404 (Not Found) in browser console. Please suggest anything to fix this issue.

Give a check to my answer to a similar problem.

xcesco
– xcesco

2019-03-26 00:27:19 +00:00
Commented Mar 26, 2019 at 0:27 — xcesco
– xcesco, Commented Mar 26, 2019 at 0:27

Community · Accepted Answer · 2017-05-23 12:26:11Z

1

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

Create normal Dynamic web project.
Add all dependancy required for spring or user maven pom.xml
Open CMD, navigate to angular2 application. Hit command npm install and then ng build or use ng build --prod for production.This command will create a "dist" folder, copy all files including all folders.
Paste those files and folders into WebContent directory.
Last thing, you need to change basehref="./" in index.html. Now you are ready to run server or you can deploy war file and serve it with tomcat or other servers.

Checkout this thread, I have mentioned file structure and its working fine.

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!

edited May 23, 2017 at 12:26

CommunityBot

11 silver badge

answered Mar 5, 2017 at 20:35

user6709592

Sign up to request clarification or add additional context in comments.

2 Comments

stuparm Over a year ago

what is basehref tag?

user6709592 Over a year ago

The <base href="/"> is most important part when application run on server, it tells the Angular router what is the static part of the URL. The router then only modifies the remaining part of the URL. You can find base href on Index.html. <head> <base href="/"> ... </head>

Alexander Peinsipp · Accepted Answer · 2016-11-07 03:15:54Z

0

I think you are missing the Ressourcehandler configuration and also the Controller on Java site - Here are some examples for using Spring MVC and Angular

answered Nov 7, 2016 at 3:15

Alexander Peinsipp

1331 silver badge10 bronze badges

3 Comments

user1188867 Over a year ago

I am using angular2 which is completely different from angular 1. So i cant follow/use those examples in my application

Alexander Peinsipp Over a year ago

This is clear but you have all other stuff to run spring mvc with angular/angular2 - do you have also implemented the java part?

user1188867 Over a year ago

Java part is done and is working fine. I have followed angular 2 quick start and created a sample which is also working but when i integrate it with spring application(I mean copying those angular2 files into spring mvc project). Its not working

Collectives™ on Stack Overflow

Configuring angular 2 with spring mvc project without spring boot

2 Answers 2

2 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related