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

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

enter image description here

如图所示,它将适用于Angular 1.x,但是Angular 2的文件结构完全不同,并且其组件驱动,并且我使用的是angular 2文件结构,如下所示enter image description here

我搜索了很多,我发现我们可以分别使用前端(使用angular2)和后端(使用spring/springboot的服务器),但是我们需要2台服务器来运行应用程序。例如,前端:192.168.100.1:4200 和后端:192.168.100.1:8080

那么有没有办法或通用文件结构在同一台服务器上同时运行angular2和spring4MVC(如192.168.100.1:8080)?

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


答案 1

直到现在还没有答案,这很好,我有解决方案。我是怎么做到的?

您需要 2 个上下文。

(1) 角度 2 项目和

(2) 弹簧MVC

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

  1. 创建正常的动态 Web 项目。
  2. 添加弹簧或用户 maven pom 所需的所有依赖项.xml
  3. 打开CMD,导航到angular2应用程序。命中命令

    npm 安装,然后

    ng构建或使用ng构建--生产用于生产

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

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

  2. 最后,您需要在索引中更改basehref=“./”.html。现在你已经准备好运行服务器,或者你可以部署war文件,并用tomcat或其他服务器提供服务。

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

您需要按照主机网址进行放置。例如,如果您在localhost:8080上运行应用程序,则需要保留urlwebServiceEndPointUrl

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

见下图,弹簧MVC+ANGULAR2的文件结构

enter image description here

我知道使用这些方式在单个服务器上运行应用程序有很多缺点,但是如果需要,您可以遵循这一点。

如果您在角度方面更改任何内容,则需要始终复制粘贴dist文件夹,然后才能部署它!


答案 2

你可以自动化你的解决方案 - 只需使用前端-maven-plugin(你可以用它来安装nodejs并构建角度项目)和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>

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