在单个服务器上运行带有 Angular 2 的 Spring4MVC

Posted 2023-02-26

【中文标题】在单个服务器上运行带有 Angular 2 的 Spring4MVC

【英文标题】：Run Spring4MVC with Angular 2 on a single server

【发布时间】：2017-06-27 20:20:35

【问题描述】：

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

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

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

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

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

【问题讨论】：

web.xml 长什么样子？

【参考方案1】：

您可以自动化您的解决方案 - 只需使用 frontend-maven-plugin（您可以使用它安装 nodejs 并构建 angular 项目）和 ma​​ven-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 服务器上使用 hot reload 功能（在开发时），由ng serve 和Angular CLI 工具运行。

【参考方案2】：

到目前为止还没有答案没关系，我找到了解决方案。我是怎么做到的？

您需要 2 个上下文。

(1) Angular 2 项目和

(2) Spring MVC

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

创建普通的动态网络项目。 添加 spring 或用户 maven pom.xml 所需的所有依赖项

打开 CMD，导航到 angular2 应用程序。命中命令

npm install 然后

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

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

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

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

如果您使用的是 Rest webservices 并希望在单个服务器中运行 angular2 和 spring，

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

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

见下图，springMVC+ANGULAR2的文件结构

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

如果您在角度方面更改任何内容，您需要一直复制粘贴 dist 文件夹，然后您可以部署它！

【讨论】：

您在第 5 步中编写了更改 index.html 中的 basehref="./"。应该改成什么？

如果您在 localhost:4200 上运行 Angular 2 应用程序，那么它将引用 basehref="/" 您可以在 src/app/index.html 中找到 basehref 属性。现在如果你想用springMVC（普通配置*模式）运行它，你将把dist文件夹的所有文件放到webapps或WebcContent文件夹中。这里需要说一下spring可以从哪里开始渲染。 [(dot-slash)./ 表示当前目录] [(slash) / 是根目录]。如果您有其他配置，您可以跳过它。在一般架构中，我已经尝试并成功实施。即使您可以尝试使用 / 和 ./

感谢第五点，它奏效了。 / & ./ 之间的区别确实有必要了解一下。

是否需要添加静态资源，例如 ？

我通过使用 HashLocationStrategy 得到了解决方案