Question

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

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

ng serve --open

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

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

ng build

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

当我通过spring-boot：run运行并转到localhost：4200时，它说连接被拒绝，请检查您的代理或防火墙

目标是将软件包的前端和后端封装在tomcat下可运行的单个战争中。

你能帮我吗？谢谢大家。

Answer 1

这是您的项目的示例目录布局：

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中添加此代码段，以便将所有404请求都路由回index.html，以便由Angular处理：

@Bean
public ErrorPageRegistrar errorPageRegistrar() {
    return (ErrorPageRegistry epr) -> {
        epr.addErrorPages(new ErrorPage(HttpStatus.NOT_FOUND, "/index.html"));
    };
}

Answer 2

我找到了一个粗略的解决方案，但到目前为止已经足够了：

通过以下方式创建（每个人）Angular项目：

dropins

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

ng new angular-client

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

ng build --prod

它有效。显然，应该通过maven自动化复制过程

Answer 3

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

示例-如果您的角度源代码位于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文件夹。

希望这会有所帮助！

Answer 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组件一起执行。

希望这会有所帮助！

Answer 5

将您的dist内容放到src/main/resources/public下的Spring Boot Java项目中，然后启动Spring Boot应用。

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

5 个答案: