java 在单个服务器上使用 Angular 2 运行 Spring4MVC
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42143221/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Run Spring4MVC with Angular 2 on a single server
提问by BeingCoders
I am new to angular2, I want to know what is the possible file structure for SpringMVC4 with angular 2?
我是angular2的新手，我想知道带有angular 2的SpringMVC4可能的文件结构是什么？
As shown in image, it will work for Angular 1.x but file structure of Angular 2 is quite different and its component driven, and I am using angular 2 file structure as given below
如图所示，它适用于 Angular 1.x，但 Angular 2 的文件结构完全不同，它的组件是驱动的，我使用的是 angular 2 文件结构，如下所示
I searched a lot and I found that we can use Front end(using angular2) and back end(server- using spring/springboot) separately, but we need 2 server to run application. For example, Frontend : 192.168.100.1:4200 And Backend : 192.168.100.1:8080
我搜索了很多，我发现我们可以分别使用前端（使用 angular2）和后端（服务器-使用 spring/springboot），但是我们需要 2 个服务器来运行应用程序。例如，前端：192.168.100.1:4200 和后端：192.168.100.1:8080
So is there any way or general file structure to run both angular2 and spring4MVC on same server (like 192.168.100.1:8080)?
那么有没有什么方法或通用文件结构可以在同一台服务器上同时运行 angular2 和 spring4MVC（比如 192.168.100.1:8080）？
Thanks in advance. Answers will be appreciated!
提前致谢。答案将不胜感激！
采纳答案by BeingCoders
No answers till now thats fine, I got solution. How I did ?
到现在为止没有答案很好，我得到了解决方案。我是怎么做的？
You need 2 contexts.
您需要 2 个上下文。
(1) Angular 2 project and
(1) Angular 2 项目和
(2) Spring MVC
(2) Spring MVC
Follow below steps to achieve our main goal, to run SPRINGMVC + Angular2 on a single server.
按照以下步骤实现我们的主要目标，在单个服务器上运行 SPRINGMVC + Angular2。
- 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 installand then
ng buildor use ng build --prodfor production
- 创建正常的动态 Web 项目。
- 添加 spring 或用户 maven pom.xml 所需的所有依赖项
打开 CMD，导航到 angular2 应用程序。命中命令
npm install然后
ng build或使用ng build --prod进行生产
this command will create a "dist" folder, copy all files including all folders.
此命令将创建一个“dist”文件夹，复制包括所有文件夹在内的所有文件。
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.
将这些文件和文件夹粘贴到 WebContent 目录中。
最后一件事，您需要更改 index.html 中的 basehref="./"。现在您已准备好运行服务器，或者您可以部署 war 文件并将其与 tomcat 或其他服务器一起使用。
If you are using Rest webservices and want to run angular2 and spring in a single server,
如果您正在使用 Rest webservices 并希望在单个服务器中运行 angular2 和 spring，
You need to put webServiceEndPointUrlas per your host url. For example, If you are running app on localhost:8080, you need to keep url
您需要webServiceEndPointUrl根据您的主机网址放置。例如，如果您在 localhost:8080 上运行应用程序，则需要保留 url
webServiceEndPointUrl= "http://localhost:8080/api/user"; at angular side. After that you can build and copy paste to your WebContent folder.
webServiceEndPointUrl=" http://localhost:8080/api/user"; 在角边。之后，您可以构建并复制粘贴到您的 WebContent 文件夹。
See below Image, File structure for springMVC+ANGULAR2
见下图，springMVC+ANGULAR2的文件结构
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!
如果你在 angular 一侧更改任何内容，则需要一直复制粘贴 dist 文件夹，然后才能部署它！
回答by Dan Brandt
You can automate your solution - just use frontend-maven-plugin(with which you can install nodejs and build the angular project) and maven-resources-pluginto copy the contents of /angular/dist/ directory into root of .war file (see also this article)
您可以自动化您的解决方案 - 只需使用frontend-maven-plugin（您可以使用它安装 nodejs 并构建 angular 项目）和maven-resources-plugin将 /angular/dist/ 目录的内容复制到 .war 文件的根目录中（另见这篇文章）
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-resources-plugin</artifactId>
<version>3.0.2</version>
<executions>
<execution>
<id>default-copy-resources</id>
<phase>process-resources</phase>
<goals>
<goal>copy-resources</goal>
</goals>
<configuration>
<overwrite>true</overwrite>
<outputDirectory>${project.build.directory}/${project.artifactId}-${project.version}/</outputDirectory>
<resources>
<resource>
<directory>${project.basedir}/angular/dist</directory>
</resource>
</resources>
</configuration>
</execution>
</executions>
</plugin>
And then you can use hot reloadfeature (while developing) on nodejs server, runned by ng servewith Angular CLItool.
然后你可以使用热重载的NodeJS服务器，通过拼命地跑上的功能（在发展）ng serve与角CLI工具。
