如何使用 SpringBoot 应用程序打包 Angular 项目
Posted
技术标签:
【中文标题】如何使用 SpringBoot 应用程序打包 Angular 项目【英文标题】：How to Package Angular Project with SpringBoot application 【发布时间】：2019-05-20 03:22:47 【问题描述】：我的 Eclipse 工作区中有一个名为 Test 的 SpringBoot Maven 项目。
之后，我在系统的另一个文件夹中创建（使用 ng，跟随 Angular 英雄之旅）一个 Angular 客户端。现在如果我用命令行启动：
ng serve --open
在我的 Angular 项目文件夹中，如果我启动我的 springboot 服务器应用程序，我可以运行 API GEt 和其他......
暂时我已经手动添加了命令获取的dist文件夹的内容
ng build
在我在 SpringBoot 项目中手动创建的 src/main/resources/static 文件夹中。
当我通过 spring-boot:run 运行并转到 localhost:4200 时，它说 连接被拒绝，请检查您的代理或防火墙
目标是将前端和后端打包到一个可在 tomcat 下运行的单一战争。
你能帮帮我吗？ 谢谢大家。
【问题讨论】：
【参考方案1】：您可以通过将 Angular CLI 配置为直接在 src/main/resources/static 文件夹中进行构建来避免复制过程。 如果您使用的是 Angular 6 或更高版本，您可以在 angular.json 文件中更改构建输出路径-
"$schema": "./node_modules/@angular-devkit/core/src/workspace/workspace-schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects":
"angular.io-example":
"root": "",
"projectType": "application",
"prefix": "app",
"architect":
"build":
"builder": "@angular-devkit/build-angular:browser",
"options":
"outputPath": "MODIFIED DIST PATH",
...
修改后的 dist 路径将是静态文件夹的相对路径。
如果您使用的是 Angular 5 或更低版本，您可以在 .angular-cli.json 文件中执行相同操作-
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"project":
"name": "angular5-sample"
,
"apps": [
"root": "src",
"outDir": "MODIFIED DIST PATH",
...
示例- 如果您的 Angular 源代码位于 src/main/webapp 文件夹中，则 outputPath 或 outDir 属性中修改后的 dist 路径将是- '../resources/static/dist'。
这将直接在 src/main/resources/static 文件夹中创建 dist 文件夹。要告诉 SpringBoot index.html 文件位于 src/main/resources/static/dist 文件夹中，您应该通过在 application.properties 文件中添加 dist 文件夹的类路径来更新静态位置.
如果在上面的例子中将 outputPath/outDir 设置为 '../resources/static'，那么构建文件将直接生成在 src/main/resources/static 文件夹中。但是，每次您进行 Angular 构建时，Angular 构建过程都会删除整个静态文件夹并使用新的构建文件创建一个新的静态文件夹。您将丢失静态文件夹中存在的任何其他文件。所以最好在静态文件夹里面有一个单独的 dist 文件夹。
希望这会有所帮助！
【讨论】：
【参考方案2】：我找到了一个粗略的解决方案，但现在已经足够了：
通过以下方式创建（每个人）一个 Angular 项目：
ng new angular-client
通过以下方式构建和部署它：
ng build --prod
将dist文件的内容放到src/main/resources/static中
maven clean install
spring-boot:run
它有效。 显然，复制过程应该由 maven 自动化
【讨论】：
【参考方案3】：这是您项目的示例目录布局：
src
├── main
│ ├── java
│ │ └── com
│ │ └── domain
│ │ └── project
│ │ ├── Run.java
│ ├── resources
│ │ ├── banner.txt
│ └── webapp
│ ├── WEB-INF
│ ├── index.html
│ ├── app
│ │ ├── app.module.js
│ │ ├── app.utils.js
不要将 Angular 文件放在 src/main/resources/static 中，而是尝试在 src/main/webapp 创建一个新的 Web 文件夹，并在其中创建一个新的 app 文件夹来存储所有 Angular 代码。这也是 Maven 中 web 项目的默认布局。
在你的pom.xml你可以添加这个插件：
<plugins>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-war-plugin</artifactId>
<configuration>
<warSourceDirectory>src/main/webapp/</warSourceDirectory>
</configuration>
</plugin>
</plugins>
同样在你的@SpringBootApplication 类Run.java 添加这个sn-p 以便所有404 请求都被路由回index.html 以便它们由Angular 处理：
@Bean
public ErrorPageRegistrar errorPageRegistrar()
return (ErrorPageRegistry epr) ->
epr.addErrorPages(new ErrorPage(HttpStatus.NOT_FOUND, "/index.html"));
;
【讨论】：
感谢您的回复，我会尽快尝试此解决方案。通常我不会将 Angular 代码放在 eclipse 中，因为它会产生错误。无论如何我会尝试。 我不明白你的意思是把所有代码都放在我的 app 文件夹或 dist 内容中。因为如果我按预期放置所有代码，我在 node_modules 文件夹中会出现很多错误。然后这样我就会有2个index.html，一个index.html在webapp下，另一个在app下（角度一个）【参考方案4】：您还可以使用以下 maven 插件依赖项来打包您的应用程序。 项目目录结构应该是这样的。
<build>
<plugins>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-war-plugin</artifactId>
<configuration>
<failOnMissingWebXml>false</failOnMissingWebXml>
<warSourceIncludes>WEB-INF/**,resources/public/build/**</warSourceIncludes>
<packagingIncludes>WEB-INF/**,resources/public/build/**</packagingIncludes>
</configuration>
</plugin>
<plugin>
<groupId>com.github.eirslett</groupId>
<artifactId>frontend-maven-plugin</artifactId>
<version>1.6</version>
<configuration>
<!-- optional: where to download node from. Defaults to https://nodejs.org/dist/ -->
<nodeDownloadRoot>http://nodejs.org/dist/</nodeDownloadRoot>
<!-- optional: where to download npm from. Defaults to https://registry.npmjs.org/npm/-/ -->
<npmDownloadRoot>http://registry.npmjs.org/npm/-/</npmDownloadRoot>
<workingDirectory>src/main/webapp/resources/public</workingDirectory>
</configuration>
<executions>
<execution>
<id>install node and npm</id>
<phase>process-classes</phase>
<goals>
<goal>install-node-and-npm</goal>
</goals>
<configuration>
<!-- See https://nodejs.org/en/download/ for latest node and npm (lts) versions -->
<nodeVersion>v8.9.4</nodeVersion>
<npmVersion>5.6.0</npmVersion>
</configuration>
</execution>
<execution>
<id>npm config</id>
<phase>process-classes</phase>
<goals>
<goal>npm</goal>
</goals>
<!-- Optional configuration which provides for running any npm command -->
<configuration>
<arguments>config set registry http://registry.npmjs.org/</arguments>
</configuration>
</execution>
<execution>
<id>npm install</id>
<phase>process-classes</phase>
<goals>
<goal>npm</goal>
</goals>
<!-- Optional configuration which provides for running any npm command -->
<configuration>
<arguments>install</arguments>
</configuration>
</execution>
<execution>
<id>npm run build</id>
<phase>process-classes</phase>
<goals>
<goal>npm</goal>
</goals>
<configuration>
<workingDirectory>src/main/webapp/resources/public</workingDirectory>
<arguments>run build</arguments>
</configuration>
</execution>
</executions>
</plugin>
</plugins>
</build>
通过执行mvn clean install，您的应用将被打包并可以使用 java 和 Angular 组件执行。
希望这会有所帮助！
【讨论】：
【参考方案5】：将 Angular 构建后的 dist 内容放入 src/main/resources/public 下的 Spring Boot Java 项目中，然后启动您的 Spring Boot 应用。
【讨论】：
以上是关于如何使用 SpringBoot 应用程序打包 Angular 项目的主要内容，如果未能解决你的问题，请参考以下文章
如何让springboot打包的项目部署在阿里云上使用https和http方式访问