如何在Spring MVC应用程序中运行Angular 2页面？

Question

如何在Spring MVC应用程序中运行Angular 2页面？

paa*_*aat 1 java spring spring-mvc web angularjs

我想让一个角度为2的项目的index.html作为Spring MVC应用程序的欢迎页面运行.
我运行角度2的方式是通过npm start.如果我不加载index.html npm start,组件就无法正确加载.
我如何才能将index.html作为Spring MVC项目的欢迎页面？

编辑:添加了一些更多细节.

angular-seed项目按原样加载.我只是尝试从angular-seed项目加载index.html.节点模块已经添加,并且运行完美npm start.

至于我的web.xml,我有这样的欢迎文件:

  <welcome-file-list>
      <welcome-file>AngularContent/src/index.html</welcome-file>
  </welcome-file-list>

Run Code Online (Sandbox Code Playgroud)

index.html有以下内容:

<!DOCTYPE html>
<html>
  <head>
    <title>Angular QuickStart</title>
    <base href="/">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <base href="/">
    <link rel="stylesheet" href="styles.css">

    <!-- Polyfill(s) for older browsers -->
    <script src="AngularContent/node_modules/core-js/client/shim.min.js"></script>

    <script src="AngularContent/node_modules/zone.js/dist/zone.js"></script>
    <script src="AngularContent/node_modules/systemjs/dist/system.src.js"></script>

    <script src="AngularContent/src/systemjs.config.js"></script>
    <script>
      System.import('AngularContent/src/main.js').catch(function(err){ console.error(err); });
    </script>
  </head>

  <body>
    <my-app>Loading AppComponent content here ...</my-app>
  </body>
</html>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Bei*_*ers 9

我有同样的问题,我最近找到了正确的解决方案.

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

创建正常的动态Web项目.
添加spring或user maven pom.xml所需的所有依赖项
打开CMD,导航到angular2应用程序.按命令 npm install下载node_modules然后ng build或ng build --prod用于生产.此命令将创建一个"dist"文件夹,复制包括所有文件夹的所有文件.
将这些文件和文件夹粘贴到WebContent目录中.
最后,你需要在index.html中更改basehref ="./".

现在您已准备好运行服务器,或者您可以部署war文件并使用tomcat或其他服务器提供服务.

如果你想要spring和angular 2的文件结构,请访问此主题!

归档时间：	8 年，9 月前
查看次数：	3286 次
最近记录：	8 年，4 月前