java - 在没有spring boot的情况下使用spring mvc项目配置angular 2

Question

我正在配置 spring mvc 项目以在没有 spring boot 的情况下使用 angular 2。

我的目录结构是:

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

我在 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>

我已经按照 angular 2 quick start

https://angular.io/guide/quickstart

所有文件都包含上述链接中提到的相同代码。我唯一改变的是: 将 app 目录、node_modules 目录和配置文件复制到 resources 目录并修改 index.jsp 以从那里加载它。

它抛出以下异常:

获取 http://localhost:8085/Phoenix/resources/angular/app/浏览器控制台中的 404(未找到)。请提出任何解决此问题的建议。

Answer 1

按照以下步骤实现我们的主要目标，即在单个服务器上运行 SPRINGMVC + Angular2。

1. 创建普通的动态网络项目。

2. 添加spring或用户maven pom.xml需要的所有依赖

3. 打开 CMD，导航到 angular2 应用程序。点击命令 npm install 然后 ng build 或使用 ng build --prod 进行生产。此命令将创建一个“dist”文件夹，复制所有文件，包括所有文件夹。

4. 将这些文件和文件夹粘贴到 WebContent 目录中。

5. 最后，您需要更改 index.html 中的 basehref="./"。现在您已准备好运行服务器，或者您可以部署 war 文件并使用 tomcat 或其他服务器提供服务。

检查这个 thread ，我已经提到了文件结构及其工作正常。

我知道使用这些方式在单个服务器上运行应用程序有很多缺点，但如果必须这样做，您可以按照此操作。

如果你在 Angular 方面做了任何改变，你需要一直复制粘贴 dist 文件夹，然后你就可以部署它了!