推荐的构建Angular 2应用程序的方法是使用Angular CLI工具。同样，当您处理Java EE项目时，通常将Maven用作构建工具。
为了充分利用这两方面的优势，您可以开发一个多模块项目，如您所愿。
如果您愿意，请克隆此示例：
git clone https://github.com/prashantpro/ng- jee.git
鉴于前端/ UI项目将是Angular 2应用程序。后端项目可以是Spring或纯Java EE应用程序（任何Web应用程序）。
我们要获取Angular 2输出（ 目录），并将其映射到UI部分的Web应用程序项目中。
这是没有任何花哨的第三方插件即可实现的方法。让我们以这个多模块项目结构为例：
（这是您的父POM项目）
.
├── pom.xml
├── ngdemo
│ ├── pom.xml --- maven pom for angular module
│ ├── dist --- This will be Angular output
│ ├── e2e
│ ├── karma.conf.js
│ ├── node_modules
│ ├── package.json
│ ├── protractor.conf.js
│ ├── README.md
│ ├── src
│ ├── tsconfig.json
│ └── tslint.json
└── webdemo
├── pom.xml
└── src
父pom.xml需要列出两个模块。第 模块应该是UI（Angular 2）模块，然后是Java / Spring模块。
*
<packaging>pom</packaging>
<modules>
<module>ngdemo</module>
<module>webdemo</module>
</modules>
接下来，如果您已使用如下CLI创建了角度应用程序：
ng new ngdemo
然后，您需要将pom.xml放在同一目录 具有以下构建插件：（这将构建Angular CLI项目并在其 文件夹中生成输出。
<build>
<plugins>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-clean-plugin</artifactId>
<version>3.0.0</version>
<configuration>
<failOnError>false</failOnError>
<filesets>
<fileset>
<directory>.</directory>
<includes>
<include>dist/**/*.*</include>
</includes>
<followSymlinks>false</followSymlinks>
</fileset>
</filesets>
</configuration>
</plugin>
<plugin>
<groupId>org.codehaus.mojo</groupId>
<artifactId>exec-maven-plugin</artifactId>
<version>1.5.0</version>
<executions>
<execution>
<id>angular-cli build</id>
<configuration>
<workingDirectory>.</workingDirectory>
<executable>ng</executable>
<arguments>
<argument>build</argument>
<argument>--prod</argument>
<argument>--base-href</argument>
<argument>"/ngdemo/"</argument>
</arguments>
</configuration>
<phase>generate-resources</phase>
<goals>
<goal>exec</goal>
</goals>
</execution>
</executions>
</plugin>
</plugins>
</build>
难题的最后一部分是引用此 文件夹，以便我们可以将输出复制到我们的WAR文件中。
因此，这是需要在 *
<build>
<resources>
<resource>
<directory>src/main/resources</directory>
</resource>
</resources>
<plugins>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-war-plugin</artifactId>
<version>2.3</version>
<configuration>
<failOnMissingWebXml>false</failOnMissingWebXml>
<webResources>
<resource>
<!-- this is relative to the pom.xml directory -->
<directory>../ngdemo/dist/</directory>
</resource>
</webResources>
</configuration>
</plugin>
</plugins>
</build>
现在，如果您从父目录 *
mvn clean install
然后您会看到，它首先构建Angular项目，然后构建Web Project，同时为后者构建，还将Angular dist内容复制到Web项目根目录中。
因此，您将在WAR / Web项目目标目录中获得如下所示的内容：
/ng-jee/webdemo/target/webdemo-1.0-SNAPSHOT.war
.
├── favicon.ico
├── index.html
├── inline.d72284a6a83444350a39.bundle.js
├── main.e088c8ce83e51568eb21.bundle.js
├── Meta-INF
├── polyfills.f52c146b4f7d1751829e.bundle.js
├── styles.d41d8cd98f00b204e980.bundle.css
├── vendor.fb5e0f38fc8dca20e0ec.bundle.js
└── WEB-INF
└── classes
而已。我将在这些方面中的一些方面进行一系列研究，在这里更多地介绍Angular和JEE
直到这希望对您有所帮助！
602392714
清零编程群