以下是我所做的：-
- 安装 Nodejs v6.9+
- 运行 npm install @angular/cli –g for Angular CLI
- 安装Apache Maven或使用任何对Maven友好的IDE
- 使用您所需的Maven配置，我使用了简单的webapp（WAR）。
目录结构（除了ngapp文件夹休息是标准的Maven结构。
ngfirst
├── pom.xml
├── src
│ └── main
│ ├── java
│ ├── resources
│ ├── webapp
│ └── ngapp
角度部分
在终端中打开ngapp文件夹并键入ng init命令来初始化node和npm配置，结果将是一个简单的Angular2示例应用程序将在ngapp文件夹内使用以下目录结构：-
├── angular-cli.json
├── e2e
├── karma.conf.js
├── node_modules
├── package.json
├── protractor.conf.js
├── README.md
├── tslint.json
├── src
├── app
├── assets
├── environments
├── favicon.ico
├── index.html
├── main.ts
├── polyfills.ts
├── styles.css
├── test.ts
└── tsconfig.json
这种结构是 Maven 项目结构的 Angular 等价物，src 目录是 Angular Application 的源代码，就像 maven 构建命令在目标文件夹中生成其输出一样，ng build 命令在 dist 文件夹中生成其输出。
为了在Maven生成的WAR中打包生成的Angular应用程序，修改构建配置以将输出文件夹从dist更改为webapp，打开angular-cli.json文件并修改其outDir，如下所示：-
"outDir": "../webapp/ng"
此时，ng build 命令将在 ngfirst/src/main/webapp 文件夹的 ng 目录中生成已构建的 Angular 应用程序。
马文部分
打开pom.xml并配置以下三个maven插件：-
-
编译器插件：没有Java的东西可以在/src/main/ngapp文件夹中编译，排除它。
-
war-plugin： /src/main/ngapp 是 Angular project 文件夹，它不应该打包在 WAR 中，排除它。
-
exec-plugin：执行 NPM Install 和 Angular-CLI Build 命令，在 webapp 文件夹中生成 Angular Application 以进行最终打包。注意 --base-href 参数，需要从 webapp 的上下文路径加载 Angular 资源。
这是它应该是什么样子的：-
<plugins>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-compiler-plugin</artifactId>
<version>3.3</version>
<configuration>
<excludes>
<exclude>ngapp/**</exclude>
</excludes>
</configuration>
</plugin>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-war-plugin</artifactId>
<version>3.0.0</version>
<configuration>
<excludes>
<exclude>ngapp/**</exclude>
</excludes>
</configuration>
</plugin>
<plugin>
<groupId>org.codehaus.mojo</groupId>
<artifactId>exec-maven-plugin</artifactId>
<version>1.5.0</version>
<executions>
<execution>
<id>exec-npm-install</id>
<phase>generate-sources</phase>
<configuration>
<workingDirectory>${project.basedir}/src/main/ngapp</workingDirectory>
<executable>npm</executable>
<arguments>
<argument>install</argument>
</arguments>
</configuration>
<goals>
<goal>exec</goal>
</goals>
</execution>
<execution>
<id>exec-npm-ng-build</id>
<phase>generate-sources</phase>
<configuration>
<workingDirectory>${project.basedir}/src/main/ngapp</workingDirectory>
<executable>ng</executable>
<arguments>
<argument>build</argument>
<argument>--base-href=/ngfirst/ng/</argument>
</arguments>
</configuration>
<goals>
<goal>exec</goal>
</goals>
</execution>
</executions>
</plugin>
</plugins>
Building Maven Project（以及Angular App）
在项目根文件夹ngfirst中打开终端并运行mvn包命令，这将在目标文件夹中生成一个WAR文件（ngfirst.war）。
在容器中部署ngfirst.war，在浏览器中打开 http://localhost:8080/ngfirst/ng/index.html。（如果需要，请调整主机名和端口）
如果一切顺利，你应该看到应用程序工作！在浏览器中，那就是Angular应用程序在工作！
JSP 预处理
我们可以将JSP技术的动态配置和页面渲染功能与Angular应用程序一起使用，Angular SPA由Java容器作为常规HTML页面，索引提供.html在这种情况下，如果我们配置JSP引擎来预处理html文件，那么所有的JSP魔术都可以包含在Angular SPA页面中，只需在Web内部包含以下内容.xml
<servlet-mapping>
<servlet-name>jsp</servlet-name>
<url-pattern>*.html</url-pattern>
</servlet-mapping>
保存，重建专家项目，部署WAR，瞧！！
