运行 Spring4MVC 与 Angular 2 在单个服务器上

Question

我是 angular2 的新手，我想知道 angular2 的 SpringMVC4 可能的文件结构是什么？

如图所示，它适用于 Angular 1.x 但 Angular 2 的文件结构完全不同并且它的组件驱动，我正在使用 angular 2 文件结构如下

我搜索了很多，发现我们可以分别使用前端（使用angular2）和后端（服务器-使用spring/springboot），但是我们需要2台服务器才能运行申请。例如，前端：192.168.100.1:4200 和后端：192.168.100.1:8080

那么在同一台服务器上（比如 192.168.100.1:8080），运行 angular2 和 spring4MVC 有什么方法或通用文件结构吗？

提前致谢。答案将不胜感激！

Answer 1

到现在还没有答案没关系，我找到了解决方案。我做得如何？

您需要 2 个上下文。

(1) Angular 2 个项目和

(2) Spring MVC

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

创建正常的动态 web 项目。
添加 spring 或用户 maven pom.xml
打开 CMD，导航到 angular2 应用程序。命中命令

npm install 然后

ng build 或使用 ng build --prod 进行生产

此命令将创建一个 "dist" 文件夹，复制所有文件，包括所有文件夹。

将这些文件和文件夹粘贴到 WebContent 目录中。
最后，您需要更改 index.html 中的 basehref="./"。现在您已准备好运行服务器，或者您可以部署 war 文件并使用 tomcat 或其他服务器提供它。

如果您正在使用 Rest 网络服务并希望在单个服务器中运行 angular2 和 spring，

您需要根据您的主机 webServiceEndPointUrl 输入 url。例如，如果您在 localhost:8080 上运行ning 应用程序，则需要保留 url

webServiceEndPointUrl= "http://localhost:8080/api/user";在 angular 侧。之后您可以构建并将粘贴复制到您的 WebContent 文件夹。

见下图，springMVC+ANGULAR2

的文件结构

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

如果你在angular这边做了任何改动，你需要一直复制粘贴dist文件夹，然后你就可以部署了！

Answer 2

您可以自动化您的解决方案 - 只需使用 frontend-maven-plugin（您可以使用它安装 nodejs 并构建 angular 项目）和 maven-resources-plugin 将 /angular/dist/ 目录的内容复制到 .war 文件的根目录（另请参阅 this article）

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

然后您可以在 nodejs 服务器上使用 热重载 功能（在开发时），由 ng serve 使用 Angular CLI 工具运行。

运行 Spring4MVC 与 Angular 2 在单个服务器上

Run Spring4MVC with Angular 2 on a single server

java

servlets

spring-mvc

ng2-bootstrap

angular