Question

我已经阅读了一些在线博客，其中指出添加此插件可构建Angular前端，因此从spring boot path-resources/static文件夹中提供Angular内容会更容易。但是找不到gradle项目的任何示例。我有一个gradle项目，其中包含用于后端和前端的模块，并尝试将其托管在同一服务器端口上。我添加了：

compile group: 'com.github.eirslett', name: 'frontend-maven-plugin', version: '1.6'

然后在前端目录中运行ng build来构建ng组件。我看到了some.js文件，并生成了以下index.html：

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Welcome App</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
<script type="text/javascript" src="runtime.js"></script><script type="text/javascript" src="polyfills.js"></script><script type="text/javascript" src="styles.js"></script><script type="text/javascript" src="vendor.js"></script><script type="text/javascript" src="main.js"></script></body>
</html>

根据我的理解，添加以上依赖关系只是负责安装npm和节点依赖关系，但不会构建ng组件。因此，我手动运行ng，这些文件在资源/静态目录中生成（当我更改了angular.json中的outputPath时）。但是无法从tomcat启动中为他们提供服务。

我只有3 ng个组件，应该可以在“ /”处访问主要登录组件uri，并且路由工作正常并且由angular（ng serve显示UI页面）处理，但是在spring-boot路径中则不能部署在与后端相同的服务器端口上。

imports: [
BrowserModule,
HttpModule,
FormsModule,
RouterModule.forRoot([
  {
    // empty path is the default page for app; redirects to Login component
    path: '',
    component: LgnComponent
  },

  {
    path: 'test',
    component: TestComponent
  },

  {
    path: 'sale',
    component: SaleComponent
  }
])

我唯一的问题是http://localhost:8080/不显示用户界面（登录等）

我的意思是问除了添加此内容外，还有其他步骤吗？依赖build.gradle以便为他们提供服务？

我想我不知道使用什么URI来访问8080上的前端。因为角度路由工作正常，并且能够在localhost：4200 /上访问，并且能够从主登录页面访问localhost：4200 / test和/ sale 。

请帮助，有一段时间我在这个问题上苦苦挣扎。

Answer 1

使用frontend-maven-plugin在Gradle中构建前端应用程序并不重要，因为该插件是为Maven设计的，而不是为Gradle设计的。您可以看一下Siouan Frontend Gradle plugin，这将使您可以直接从Gradle触发前端应用程序的构建。在官方网站上：

它受frontend-maven-plugin的启发。

此other answer to a similar question提供了有关如何使用此插件的示例。这是构建前端应用程序的最小配置示例：

// build.gradle
plugins {
    id 'org.siouan.frontend' version '1.1.2'
}

frontend {
    // Replace with your Node version.
    nodeVersion = '10.15.3'
    // Replace 'build' by the name of your script in your project's 'package.json' file.
    assembleScript = 'run build'
}

拥有由Spring Boot后端提供服务并正确打包在最终归档文件中的新构建的前端应用程序是不同的问题。通过使用JHipster及其JHipster Online服务生成演示应用程序，您将找到Angular + Spring Boot + Gradle应用程序的工作示例。这还将向您显示后端或前端开发服务器将在何处生成不同的工件。

编辑

该插件的主页现在提供了一些使用指南，这些指南可能有助于将前端和Java后端“打包”在一起。

Answer 2

该插件似乎有点过时了。

我正在使用gradle node plugin。您将build命令添加到project.json，然后通过插件执行脚本：

package.json：

{
  "name": "stuff",
  "version": "0.1.4",
  "license": "MIT",
  "scripts": {
    "buildProd": "ng build -prod"
  }
...
}

build.gradle：

//execute buildProd script from project.json
task buildClient(type: NpmTask, dependsOn: [npmInstall]) {
    args = ['run-script', 'buildProd']
}

task copyClient(type: Copy, dependsOn: [buildClient]) {
    from 'dist'
    into "${buildDir}/resources/main/static"
}

//build & copy client before processResources
processResources.dependsOn copyClient

如何在基于Gradle的项目中使用前端Maven插件来提供前端服务？

2 个答案: