2

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.

Evan Wieland
  • 1,445
  • 1
  • 20
  • 36
user1188867
  • 3,726
  • 5
  • 43
  • 69
  • Give a check to [my answer](https://stackoverflow.com/questions/52699687/my-angular-spring-application-routing-does-not-work-when-deployed-on-tomcat/55348102#55348102) to a similar problem. – xcesco Mar 26 '19 at 00:27

2 Answers2

1

Follow below steps to achieve our main goal, to run SPRINGMVC + Angular2 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 --prod for production.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. 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!

Community
  • 1
  • 1
  • 1
    what is basehref tag? – c3R1cGFy May 05 '17 at 14:11
  • 2
    The 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. ... –  May 06 '17 at 14:51
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

Alexander Peinsipp
  • 123
  • 1
  • 10
  • I am using angular2 which is completely different from angular 1. So i cant follow/use those examples in my application – user1188867 Nov 07 '16 at 04:29
  • This is clear but you have all other stuff to run spring mvc with angular/angular2 - do you have also implemented the java part? – Alexander Peinsipp Nov 07 '16 at 04:37
  • 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 – user1188867 Nov 07 '16 at 09:18