Question

Angular projet构建依赖于Angular CLI tool Spring启动项目构建依赖于Spring Boot Maven Plugin。

那么如何在前端配置和构建一个承载Angular应用程序的Spring Boot应用程序呢？

我的要求如下：

使用Maven作为Java构建工具
在Spring Boot引导的嵌入式Tomcat实例中运行应用程序。
开发环境中高效的构建生命周期
后期开发环境的可靠构建

Answer 1

角度配置

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

一种简单的方法需要进行2次简单的更改：

在Spring Boot Maven项目的根文件夹中移动angular应用程序文件夹。
将.angular-cli.json配置文件修改为默认情况下，更改apps/outDir "dist"的{{1}}值 "../src/main/resources/static"。

那是：

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

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

这样，当我执行ServletContext命令时，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配置文件：

ng build

一些补充说明：

在开发过程中，我希望总是有办法在需要时添加断点，而无需重新启动应用程序。
以这种方式估价的Spring Boot 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>参数：

jvmArguments

指定<jvmArguments> -Xdebug -Xrunjdwp:transport=dt_socket,server=y,suspend=n,address=5005 </jvmArguments>作为调试器侦听器的端口，而不阻塞（5005）服务器。

要启用静态资源的热刷新，我将suspend=n设置为addResources。

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

true

一些补充说明：

<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是我在Maven Spring Boot项目中复制的角度应用程序的目录。
<workingDirectory>angular-app</workingDirectory>是<installDirectory>angular-app</installDirectory>将安装节点和所需依赖项的工作文件夹。
本身，frontend-maven-plugin目录不直接用于生成打包的应用程序因此，使用此目录很好，并且还允许从Angular CLI运行角度应用程序。

用于运行构建的Angular和Spring Boot命令

对于开发构建：
- Angular CLI：从angular-app目录中执行angular-app。它将构建Angular应用程序，并以增量方式更新构建（ng build -w for watch）
- Spring Boot：从maven项目的基目录开始执行w（欢迎执行它的脚本）
对于后期开发构建：
- 不需要Angular CLI。
- Spring Boot：从maven项目的基本目录中执行mvn spring-boot:run -Pfast-build

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

1 个答案: