我有类似的要求，要有一个源项目，它有 java web-services 项目以及 angular 项目（一个基于 angular-cli 的项目），maven build 应该创建一个包含所有 angular 文件的战争。我使用了maven-frontend-plugin，基本路径的配置更改很少。
我们的目标是创建一个war文件，其中包含所有java代码以及war根文件夹中的所有aot编译的角度代码，所有这些都使用单个命令mvn clean package。
让所有这些工作的另一件事是避免 angular-app 路由器 url 和您的 java 应用程序 url 之间的冲突，您需要使用 HashLocationStrategy。一种在 app.module.ts 中设置的方法，如下所示
app.module.ts -
providers: [
{ provide: LocationStrategy, useClass: HashLocationStrategy },
]
Angular App 的文件夹结构如下-
角度项目
- 分布
- e2e
- node_modules
- 公开
- 源
- 应用程序
- 资产
- 环境
- favicon.ico
- index.html
- main.ts
- polyfills.ts
- style.css
- tsconfig.json
- typings.d.ts
- 等等等等
- tmp
- .angular-cli.json
- .gitignore
- karma.conf.js
- package.json
- README.md
- tslint.json
- 等等 - 等等
Maven 项目 -
- 源
- angular-project（将您的 Angular 项目放在这里）
- node_installation
- pom.xml
在 pom.xml 中添加 maven-frontend-plugin 配置
<properties>
<angular.project.location>angular-project</angular.project.location>
<angular.project.nodeinstallation>node_installation</angular.project.nodeinstallation>
</properties>
<plugin>
<groupId>com.github.eirslett</groupId>
<artifactId>frontend-maven-plugin</artifactId>
<version>1.0</version>
<configuration>
<workingDirectory>${angular.project.location}</workingDirectory>
<installDirectory>${angular.project.nodeinstallation}</installDirectory>
</configuration>
<executions>
<!-- It will install nodejs and npm -->
<execution>
<id>install node and npm</id>
<goals>
<goal>install-node-and-npm</goal>
</goals>
<configuration>
<nodeVersion>v6.10.0</nodeVersion>
<npmVersion>3.10.10</npmVersion>
</configuration>
</execution>
<!-- It will execute command "npm install" inside "/e2e-angular2" directory -->
<execution>
<id>npm install</id>
<goals>
<goal>npm</goal>
</goals>
<configuration>
<arguments>install</arguments>
</configuration>
</execution>
<!-- It will execute command "npm build" inside "/e2e-angular2" directory
to clean and create "/dist" directory -->
<execution>
<id>npm build</id>
<goals>
<goal>npm</goal>
</goals>
<configuration>
<arguments>run build</arguments>
</configuration>
</execution>
</executions>
</plugin>
<!-- Plugin to copy the content of /angular/dist/ directory to output
directory (ie/ /target/transactionManager-1.0/) -->
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-resources-plugin</artifactId>
<version>2.4.2</version>
<executions>
<execution>
<id>default-copy-resources</id>
<phase>process-resources</phase>
<goals>
<goal>copy-resources</goal>
</goals>
<configuration>
<overwrite>true</overwrite>
<!-- This folder is the folder where your angular files
will be copied to. It must match the resulting war-file name.
So if you have customized the name of war-file for ex. as "app.war"
then below value should be ${project.build.directory}/app/
Value given below is as per default war-file name -->
<outputDirectory>${project.build.directory}/${project.artifactId}-${project.version}/</outputDirectory>
<resources>
<resource>
<directory>${project.basedir}/${angular.project.location}/dist</directory>
</resource>
</resources>
</configuration>
</execution>
</executions>
</plugin>
如上插件在内部调用“npm run build”，确保 package.json 应该在脚本中有 build 命令，如下所示 -
package.json
"scripts": {
-----//-----,
"build": "ng build --prod",
-----//------
}
index.html 应该总是在有人从浏览器中点击应用程序时加载，这就是为什么将其设为欢迎文件的原因。对于 Web 服务，假设我们有路径 /rest-services/* 稍后会解释。
web.xml -
<welcome-file-list>
<welcome-file>index.html</welcome-file>
</welcome-file-list>
<servlet-mapping>
<servlet-name>restservices</servlet-name>
<url-pattern>/restservices/*</url-pattern>
</servlet-mapping>
如果您的应用程序没有任何上下文路径并且部署在服务器的根路径上，上述配置就足够了。但是，如果您的应用程序有任何上下文路径，例如 http://localhost:8080/myapplication/，那么也要更改 index.html 文件 -
angular-project/src/index.html - 这里的 document.location 将是 myapplication/ （否则是应用程序的上下文路径/如果应用程序没有上下文路径）
使上下文路径成为 angular-app 的基本路径的目的是，每当您从 Angular 进行 ajax http 调用时，它都会将基本路径添加到 url。例如，如果我尝试调用“restservices/persons”，那么它实际上会调用“http://localhost:8080/myapplication/restservices/persons”
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>E2E</title>
<script>document.write('<base href="' + document.location + '" />'); </script>
<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>
</body>
在您运行mvn clean package 后进行所有上述更改后，它将创建所需的战争。检查 angular 'dist' 文件夹的所有内容是否都在 war 文件的根目录中。