Java 如何使用SpringBoot应用程序打包Angular项目

我在eclipse工作区中有一个名为Test的SpringBoot Maven项目

之后，我在系统上的另一个文件夹中创建了一个角度客户端（使用ng，跟随英雄的角度之旅）。现在，如果我使用命令行启动：

ng serve --open

在angular项目文件夹中，如果启动springboot服务器应用程序，我可以运行API GEt和其他

暂时我已经手动添加了通过命令获得的dist文件夹的内容

ng build

在我在SpringBoot项目中手动创建的src/main/resources/static文件夹中

当我通过springboot:run运行并转到localhost:4200时，它显示连接被拒绝，请检查您的代理或防火墙

我们的目标是将前端和后端打包成一个可以在tomcat下运行的战争包

你能帮我吗？

---

谢谢大家。

我找到了一个粗略的解决方案，但现在已经足够了：

通过以下方式创建（每个位置）角度项目：

ng new angular-client

通过以下方式构建和部署它：

ng build --prod

将dist文件的内容放在src/main/resources/static中

maven clean install

spring-boot:run

一个有效的方法。

---

显然，复制过程应该是自动化的，可能是由maven实现的

src
├── main
│   ├── java
│   │   └── com
│   │       └── domain
│   │           └── project
│   │               ├── Run.java
│   ├── resources
│   │   ├── banner.txt
│   └── webapp
│       ├── WEB-INF
│       ├── index.html
│       ├── app
│       │   ├── app.module.js
│       │   ├── app.utils.js

不要将角度文件放在

src/main/resources/static

中，而是尝试在

src/main/webapp

中创建一个新的web文件夹，并在其中创建一个新的

app

文件夹来存储所有角度代码。这也是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>

---

通过将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",
            ...

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "angular5-sample"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "MODIFIED DIST PATH",
      ...

修改后的dist路径将是静态文件夹的相对路径

如果使用的是Angular 5或更低版本，则可以在.Angular cli.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",
            ...

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "angular5-sample"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "MODIFIED DIST PATH",
      ...

示例-如果源代码位于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文件夹中生成。但是，每次进行角度构建时，角度构建过程将删除整个静态文件夹，并使用新构建文件创建一个新的静态文件夹。您将丢失静态文件夹中的任何其他文件。因此，最好在静态文件夹中有一个单独的dist文件夹

---

希望这有帮助

您还可以使用以下maven插件依赖项来打包应用程序。 项目目录结构应该如下所示

org.apache.maven.plugins
maven战争插件
假的
WEB-INF/**，资源/公共/构建/**
WEB-INF/**，资源/公共/构建/**
com.github.eirslett
前端maven插件
1.6
http://nodejs.org/dist/
http://registry.npmjs.org/npm/-/
src/main/webapp/resources/public
安装节点和npm
进程类
安装节点和npm
v8.9.4
5.6.0
npm配置
进程类
npm
配置集注册表http://registry.npmjs.org/
npm安装
进程类
npm
安装
npm运行构建
进程类
npm
src/main/webapp/resources/public
运行构建

通过执行

mvn clean install

您的应用程序将被打包，并可以使用java和Angular组件执行

---

希望这有帮助

将angular build后的

dist

内容放入Spring Boot Java项目的

src/main/resources/public

下，然后启动Spring Boot应用程序。

感谢您的回复，我会尽快尝试此解决方案。通常我不会将Angular代码放在eclipse中，因为它会生成错误。。无论如何，我会试试。我不明白你是想把所有代码都放在我的应用程序文件夹还是dist内容中。因为如果我像预期的那样把所有代码放在node_modules文件夹中，我会有很多错误。这样我就有了2个index.html，一个index.html在webapp下，另一个在app下（angular one）