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

我想从一个角度2项目的index.html作为Spring MVC应用程序的欢迎页面运行。
我运行角度2的方式是通过npm start。如果我在不执行npm start的情况下加载index.html，则组件加载不正确。
我如何能够将index.html作为我的Spring MVC项目的欢迎页面？如何在Spring MVC应用程序中运行Angular 2页面？

编辑：添加了一些更多的细节。

angular-seed项目按原样加载。我只是试图从angular-seed项目加载index.html。节点模块已经被添加，并且与npm start完美配合。

至于我的web.xml，我欢迎文件是这样的：

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

和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>

来源

2017-02-28 paaaaat

你需要正确配置你的src，发布一些代码是有帮助的 – Jaiwo99

@ Jaiwo99添加代码。让我知道你是否需要更多 – paaaaat

我有同样的问题，我找到了正确的解决方案。

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

创建正常的动态web项目。
添加弹簧或用户的Maven的pom.xml
打开CMD所需的全部扶养，导航到angular2应用。点击命令 npm install下载node_modules然后ng build或使用ng build --prod进行生产。此命令将创建一个“dist”文件夹，复制包括所有文件夹的所有文件。
将这些文件和文件夹粘贴到WebContent目录中。
最后一件事，您需要在index.html中更改basehref =“./”。

现在您已准备好运行服务器，或者您可以部署war文件并通过tomcat或其他服务器提供服务。

访问this thread如果你想要spring和angular 2的文件结构！

来源

2017-03-05 20:04:01 BeingCoders

非常感谢第5点）“./” – pixelstuermer

5）非常有用。 –

点5是伟大的和最有用的东西。它救了我。 –

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

回答

相关问题