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

Question

我是angular2的新手,我想知道SpringMVC4的角度为2的可能文件结构是什么？

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

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

那么有没有任何方法或一般文件结构在同一台服务器上运行angular2和spring4MVC(如192.168.100.1:8080)？

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

Answer 1

直到现在还没有答案那很好,我得到了解决方案.我怎么做的？

你需要2个上下文.

(1)Angular 2项目和

(2)Spring MVC

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

1. 创建正常的动态Web项目.
2. 添加spring或user maven pom.xml所需的所有依赖项

3. 打开CMD,导航到angular2应用程序.命中命令

   npm安装然后

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

此命令将创建一个"dist"文件夹,复制包括所有文件夹的所有文件.

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

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

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

您需要webServiceEndPointUrl根据您的主机网址添加.例如,如果您在localhost:8080上运行应用程序,则需要保留URL

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

请参见下图图像,springMVC + ANGULAR2的文件结构

我知道使用这些方法在单个服务器上运行应用程序有许多缺点,但如果必须要求,您可以遵循这一点.

如果你在角边改变任何东西,你需要一直复制paste dist文件夹然后你可以部署它!

Answer 2

您可以自动化您的解决方案 - 只需使用frontend-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服务器上使用热重新加载功能(在开发时),ng serve使用Angular CLI工具运行.