Angular 和 Spring Boot：使它们有效协同工作的配置

Posted 2023-02-27

【中文标题】Angular 和 Spring Boot：使它们有效协同工作的配置

【英文标题】：Angular and Spring Boot : configuration to make them work together efficiently

【发布时间】：2018-04-05 10:49:04

【问题描述】：

Angular 项目构建依赖于 Angular CLI tool。 Spring boot 项目构建依赖于Spring Boot Maven Plugin。

那么如何配置和构建在前端托管 Angular 应用程序的 Spring Boot 应用程序？

我的要求如下：

使用 Maven 作为 Java 构建工具

在由 Spring Boot 引导的嵌入式 Tomcat 实例中运行应用程序。

开发环境中的高效构建生命周期

用于后期开发环境的可靠构建

【问题讨论】：

很好的自我回答问题！

【参考方案1】：

角度配置

首先，我需要配置 Angular 应用程序，以使 Angular 应用程序的构建在 Spring Boot Maven 项目的源代码目录中可用。

一个简单的方法需要两个简单的改变：

将 Angular 应用程序文件夹移动到 Spring Boot Maven 项目的根文件夹中。

修改.angular-cli.json配置文件为 更改默认为 "dist" 的 apps/outDir 值，通过 "../src/main/resources/static"。

那是：

  ...
  "apps": [
    
      "root": "src",
      "outDir": "../src/main/resources/static",
  ...

默认情况下，Spring Boot 从类路径中名为 /static（或 /public 或 /resources 或 /META-INF/resources）的目录或 ServletContext 的根目录中提供静态内容。

这样，当我执行ng build 命令时，Webpack 捆绑的 Angular 应用程序将位于 Spring Boot 静态内容的资源目录中。

---

Spring Boot 配置

我不想在开发和开发后环境中执行完全相同的 Spring Boot 构建任务。 当然，这并不意味着构建会根据目标环境产生不同的功能行为。

在开发中，我想要快速构建。 当我修改源代码（Java、javascript 或其他任何东西）时，我想要一个快速的反馈。例如，我不想在每次修改源代码时打包和重新部署应用程序。 我也不想在每次更改源代码时都做一些特殊的事情。 我希望更改能够快速自动地反映在应用程序中。

要为后期开发环境构建应用程序，我想要一个可靠的构建并包含最终内容。 这里是后期开发环境的详细要求：

我想从头开始完整构建 Angular 应用程序（甚至整个 Spring Boot 应用程序）。 在每次修改源代码时增量更新 webpack 捆绑应用程序在开发过程中很好，但是当我交付我的应用程序时，我真的会最大限度地减少潜在的副作用。 我不在乎是否必须从头开始打包应用程序，因为我不经常创建此构建，而且我也将此任务留给自动工具，例如持续集成。

我想以一种自治的方式重新打包应用程序，方法是运行一个嵌入式 Tomcat 来部署它。 Spring Boot Maven 插件的repackage goal 实现了。

为了能够以干净/可靠的方式从一种构建类型切换到另一种构建类型，我想指定两个不同的构建。

Maven（作为 Gradle）提供了一个 build profile 功能，可以很好地满足这一要求。 所以，我用它。

这是用于开发构建的 Maven 配置文件：

<profile>
    <id>fast-build</id>
    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <configuration>
                    <jvmArguments>
                        -Xdebug -Xrunjdwp:transport=dt_socket,server=y,suspend=n,address=5005
                    </jvmArguments>
                    <addResources>true</addResources>
                </configuration>
            </plugin>
        </plugins>
    </build>
</profile>

一些补充说明：

在开发过程中，我希望始终能够在需要时添加断点，而无需重新启动应用程序。 Spring Boot Maven 插件的jvmArguments 参数以这种方式赋值：

<jvmArguments> -Xdebug -Xrunjdwp:transport=dt_socket,server=y,suspend=n,address=5005 </jvmArguments>

将5005 指定为调试器侦听器的端口，而不会阻塞服务器（suspend=n）。

为了启用静态资源的热刷新，我将addResources设置为true。

这是用于后期开发构建的 Maven 配置文件（以及它使用的声明属性）：

<properties>
    ...
    <node.version>v6.9.1</node.version>
    <npm.version>3.10.8</npm.version>
    ...
</properties>
    ...
    <profile>
        <id>full-build</id>
        <activation>
            <activeByDefault>true</activeByDefault>
        </activation>
        <build>
            <plugins>
                <plugin>
                    <groupId>org.springframework.boot</groupId>
                    <artifactId>spring-boot-maven-plugin</artifactId>
                    <executions>
                        <execution>
                            <goals>
                                <goal>repackage</goal>
                            </goals>
                        </execution>
                    </executions>
                </plugin>
                <plugin>
                    <groupId>com.github.eirslett</groupId>
                    <artifactId>frontend-maven-plugin</artifactId>
                    <version>1.2</version>
                    <configuration>
                        <installDirectory>angular-app</installDirectory>
                        <workingDirectory>angular-app</workingDirectory>
                    </configuration>
                    <executions>
                        <execution>
                            <id>install node and npm</id>
                            <goals>
                                <goal>install-node-and-npm</goal>
                            </goals>
                            <configuration>
                                <nodeVersion>$node.version</nodeVersion>
                                <npmVersion>$npm.version</npmVersion>
                            </configuration>
                        </execution>
                        <execution>
                            <id>install angular app</id>
                            <goals>
                                <goal>npm</goal>
                            </goals>
                            <configuration>
                                <arguments>install</arguments>
                            </configuration>
                        </execution>                            
                        <execution>
                            <id>npm build</id>
                            <goals>
                                <goal>npm</goal>
                            </goals>
                            <configuration>
                                <arguments>run build</arguments>
                            </configuration>
                        </execution>
                    </executions>
                </plugin>
            </plugins>
        </build>
    </profile>

一些补充说明：

angular-app 在这里声明：<workingDirectory>angular-app</workingDirectory> 是我在 Maven Spring Boot 项目中复制的 Angular 应用程序的目录。

<installDirectory>angular-app</installDirectory> 是frontend-maven-plugin 将安装节点和所需依赖项的工作文件夹。angular-app 目录本身并不直接用于生成打包的应用程序。 所以使用这个目录很好，也允许从 Angular CLI 运行 Angular 应用程序。

---

Angular 和 Spring Boot 命令运行构建

用于开发构建：

Angular CLI：从angular-app 目录，执行ng build -w。 它将构建 Angular 应用程序并逐步更新构建（w for watch） Spring Boot : 从 maven 项目的基础目录中，执行mvn spring-boot:run -Pfast-build（欢迎执行它的脚本）

用于后期开发构建：

不需要 Angular CLI。 Spring Boot：从maven项目的基础目录，执行mvn spring-boot:run

【讨论】：

Angular 路由器无法正常工作。要使其工作，您需要将所有客户端路径路由到 index.html 或使用 hash # route

我使用它时没有这个问题。实际上关于使用 HTML URL 的路由器部分，我做到了。 ***.com/a/46854105/270371或许能帮到你。