如何集成 Angular 2 + Java Maven Web 应用程序
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38532210/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to integrate Angular 2 + Java Maven Web Application
提问by RAJESHPODDER007
I have created a Angular 2 front-end Application.and i have created one Java Rest WS Back-end Application which is connected to DB.
我创建了一个 Angular 2 前端应用程序。我创建了一个连接到数据库的 Java Rest WS 后端应用程序。
My Folder structure for Angular 2 App is below-
我的 Angular 2 App 文件夹结构如下-
Angular2App
confg
dist
e2e
node_modules
public
src
app
favicon.ico
index.html
main.ts
system-config.ts
tsconfig.json
typings.d.ts
tmp
typings
.editorconfig
.gitignore
angular-cli.json
angular-cli-build.js
package.json
README.md
tslint.json
typings.json
And My Java Maven Web Application Structure is below-
我的 Java Maven Web 应用程序结构如下-
JerseyWebApp
src
main
java
Custom Package
java classes
resources
webapp
WEB-INF
web.xml
index.html
pom.xml
I want to know how to integrate these two applications into one application which will produce only one war file.
我想知道如何将这两个应用程序集成到一个仅生成一个 war 文件的应用程序中。
回答by Caio Leonhardt
I recommend let the two applications separated, this way you have modularity. This way you can change the Angular App without affect your service, and vice versa. For second, your apache/nginx are faster to deliver your js and html from Angular instead Tomcat (for example). But if you still want put the Angular application inside the war, the pattern is that all web resources are in src/main/webapp.
我建议让两个应用程序分开，这样你就有了模块化。这样您就可以在不影响您的服务的情况下更改 Angular 应用程序，反之亦然。其次，您的 apache/nginx 可以更快地从 Angular 而不是 Tomcat（例如）交付 js 和 html。但是如果你仍然想把 Angular 应用程序放在 war 中，那么模式是所有的 web 资源都在 src/main/webapp 中。
回答by Scrambo
Funnily enough, I did just this last week!
有趣的是，我上周刚做了这个！
Using Netbeans 8.1 and a Tomcat servlet version 8.0.27
使用 Netbeans 8.1 和 Tomcat servlet 版本 8.0.27
Angular and Java project file structure.
Angular 和 Java 项目文件结构。
Java Project is called Foo. Angular Project is Bar
Java 项目称为 Foo。Angular 项目是酒吧
Foo (Java Maven Project)
|__ src
| |__ main
| | |__ webapp (This folder contains the entire Angular Project)
| | | |__ META-INF
| | | | \__ context.xml
| | | |__ WEB-INF
| | | | \__ web.xml
| | | |__ includes
| | | | |__ css
| | | | |__ images
| | | | \__ js
| | | |
| | | | ## Bar project files are located here ##
| | | |
| | | |__ app
| | | | \__ All .ts and compiled .js files are located here
| | | |__ node_modules
| | | | \__ any dependencies used for Bar are located here
| | | |__ typings
| | | | \__ typings for Typescript located here
| | | |
| | | |__ README.txt
| | | |__ index.jsp
| | | |__ package.json
| | | |__ systemjs.config.js
| | | |__ tsconfig.json
| | | |__ typings.json
| | | \ ## Bar project files end here
| | |
| | |__ resources
| | | |__META-INF
| | | | \__ persistence.xml
| | |__ java
| | | |__ hibernate.cfg.xml
| | | |__ com
| | | | |__ orgName
| | | | | |__ packageName
| | | | | | \__ .java files are here
|__ pom.xml
\__ nb-configuration.xml
回答by J_Dev
Here is what I did:-
这是我所做的：-
- Install Nodejs v6.9+
- Run npm install @angular/cli –gfor Angular CLI
- Install Apache Maven or use any Maven friendly IDE
- Use your required Maven configuration, I used simple webapp (WAR).
- 安装 Nodejs v6.9+
- 为 Angular CLI运行npm install @angular/cli –g
- 安装 Apache Maven 或使用任何 Maven 友好的 IDE
- 使用您所需的 Maven 配置，我使用了简单的 webapp (WAR)。
Directory Stucture(Except for ngappfolder rest is standard Maven structure.)
目录结构（除了ngapp文件夹，其余是标准的 Maven 结构。）
ngfirst
├── pom.xml
├── src
│?? └── main
│?? ├── java
│?? ├── resources
│?? ├── webapp
│?? └── ngapp
Angular Part
角件
Open ngappfolder in terminal and type ng initcommand to initialize node and npm configuration, the result will be a simple Angular2 example application will the following directory structure inside ngapp folder:-
在终端中打开ngapp文件夹并输入ng init命令来初始化节点和 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
This structure is Angular equivalent of Maven project structure and srcdirectory is Angular Application's source, just like maven buildcommand generates its output in targetfolder, ng buildcommand generates its output in distfolder.
这个结构是 Angular 的 Maven 项目结构，src目录是 Angular 应用程序的源，就像maven build命令在target文件夹中生成它的输出一样，ng build命令在dist文件夹中生成它的输出。
In order to package the generated Angular application within Maven generated WAR modify the build configuration to change the output folder from distto webapp, open angular-cli.jsonfile and modify its outDir as below:-
为了在 Maven 生成的 WAR 中打包生成的 Angular 应用程序，修改构建配置将输出文件夹从dist更改为webapp，打开angular-cli.json文件并修改其 outDir 如下：-
"outDir": "../webapp/ng"
At this point ng buildcommand will generate built Angular Application inside ngdirectory of ngfirst/src/main/webappfolder.
此时ng build命令将在ngfirst/src/main/ webapp文件夹的ng目录中生成构建的 Angular 应用程序。
Maven Part
Maven 部分
Open pom.xml and configure following three maven plugins:-
打开 pom.xml 并配置以下三个 maven 插件：-
- compiler-plugin: No Java stuff to compile in /src/main/ngappfolder, exclude it.
- war-plugin: /src/main/ngappis Angular project folder and it should not be packaged in WAR, exclude it.
- exec-plugin: Execute NPM Install and Angular-CLI Build commands to generate Angular Application in webapp folder for final packaging. Note --base-href argument, it is required to load Angular resources from webapp's context path.
- 编译器插件：在 /src/main/ ngapp文件夹中没有要编译的 Java 内容，排除它。
- war-plugin: /src/main/ ngapp是 Angular 项目文件夹，不应打包在 WAR 中，排除它。
- exec-plugin：执行 NPM Install 和 Angular-CLI Build 命令，在 webapp 文件夹中生成 Angular 应用程序以进行最终打包。注意 --base-href 参数，需要从 webapp 的上下文路径加载 Angular 资源。
Here is how it should look like:-
它应该是这样的：-
<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(and Angular App too)
构建 Maven 项目（以及 Angular 应用程序）
Open Terminal in project root folder ngfirstand run mvn packagecommand, this will generate a WAR file (ngfirst.war) in targetfolder.
在项目根文件夹ngfirst 中打开终端并运行mvn package命令，这将在目标文件夹中生成一个 WAR 文件（ngfirst.war）。
Deploy ngfirst.warin a container, open http://localhost:8080/ngfirst/ng/index.htmlin Browser. (adjust your hostname and port if required)
在容器中部署ngfirst.war，在浏览器中打开http://localhost:8080/ngfirst/ng/index.html。（如果需要，调整您的主机名和端口）
If everything went right, you should see app works!in browser, that is Angular Application at work!!
如果一切顺利，您应该会看到应用程序正常运行！在浏览器中，这就是 Angular 应用程序在工作！！
JSP Pre-Processing
JSP 预处理
We can leverage dynamic configuration and page rendering capabilities of JSP technology with Angular application, Angular SPA is served by the Java container as regular HTML page, index.htmlin this case, if we configure JSP Engine to pre-process html files too, then all JSP magic can be included inside Angular SPA Page, just include the following inside web.xml
我们可以在 Angular 应用程序中利用 JSP 技术的动态配置和页面渲染能力，Angular SPA 由 Java 容器作为常规 HTML 页面提供，在这种情况下为index.html，如果我们也配置 JSP 引擎来预处理 html 文件，那么所有 JSP 魔法都可以包含在 Angular SPA 页面中，只需在web.xml 中包含以下内容
<servlet-mapping>
<servlet-name>jsp</servlet-name>
<url-pattern>*.html</url-pattern>
</servlet-mapping>
Save, rebuild maven project, deploy WAR and voila!!
保存，重建 maven 项目，部署 WAR，瞧！！
回答by boly38
My side I have a maven module for angular sources called prj-angular, and anoter one for war application called prj-war.
我这边我有一个用于角源的 maven 模块，称为prj-angular，还有一个用于战争应用程序的 maven 模块，称为prj-war。
first prj angularis built:
构建第一个prj 角度：
- it uses maven-exec-plugin to call
npm installandng build(thanks to @J_Dev!) - change resource default directory to
dist/ - skip jar MANIFEST generation
- maven module result: a jar with generated angular dist/content only!
- 它使用 maven-exec-plugin 来调用
npm install和ng build（感谢@J_Dev！） - 将资源默认目录更改为
dist/ - 跳过 jar 清单生成
- maven 模块结果：仅生成角度dist/内容的 jar ！
then, second prj_waris build:
然后，第二个prj_war是构建：
- has prj angularas dependency
- use unpack phase to unzip the previous jar into web app destination
- this module build you app war with fresh angular dist.
- 有prj angular作为依赖
- 使用 unpack 阶段将前一个 jar 解压缩到 Web 应用程序目标中
- 这个模块用新的角度分布构建你的应用程序战争。
Follow under the corresponding plugin configuration I used:
按照我使用的相应插件配置下：
prj angular (pom.xml extract)
prj 角度（pom.xml 提取）
<build>
<resources>
<resource>
<directory>dist</directory>
</resource>
</resources>
<plugins>
<!-- skip compile -->
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-compiler-plugin</artifactId>
<executions>
<execution>
<id>default-compile</id>
<phase />
</execution>
</executions>
</plugin>
<plugin>
<groupId>org.codehaus.mojo</groupId>
<artifactId>exec-maven-plugin</artifactId>
<executions>
<execution>
<id>exec-npm-install</id>
<phase>generate-sources</phase>
<configuration>
<workingDirectory>${project.basedir}</workingDirectory>
<executable>npm.cmd</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</workingDirectory>
<executable>ng.cmd</executable>
<arguments>
<argument>build</argument>
<argument>--no-progress</argument>
<argument>--base-href=/app/ng/</argument> <== to update
</arguments>
</configuration>
<goals>
<goal>exec</goal>
</goals>
</execution>
</executions>
</plugin>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-jar-plugin</artifactId>
<configuration>
<archive>
<addMavenDescriptor>false</addMavenDescriptor>
<manifest>
<addClasspath>false</addClasspath>
</manifest>
</archive>
</configuration>
</plugin>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-shade-plugin</artifactId>
<executions>
<execution>
<phase>package</phase>
<goals>
<goal>shade</goal>
</goals>
<configuration>
<filters>
<filter>
<artifact>*:*</artifact>
<excludes>
<exclude>META-INF/</exclude>
</excludes>
</filter>
</filters>
</configuration>
</execution>
</executions>
</plugin>
</plugins>
</build>
prj war (pom.xml extract)
prj 战争（pom.xml 提取物）
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-dependency-plugin</artifactId>
<executions>
<execution>
<id>unpack angular distribution</id>
<phase>generate-resources</phase>
<goals>
<goal>unpack</goal>
</goals>
<configuration>
<artifactItems>
<artifactItem>
<groupId>com.myapp</groupId> <== to update
<artifactId>prj-angular</artifactId> <== to update
<overWrite>true</overWrite>
<includes>**/*</includes>
</artifactItem>
</artifactItems>
<outputDirectory>${project.build.directory}/prjwar/ng</outputDirectory> <== to update
<overWriteReleases>true</overWriteReleases>
<overWriteSnapshots>true</overWriteSnapshots>
</configuration>
</execution>
</executions>
</plugin>
回答by xcesco
I want to share how I set my Angular/Java projects. Some important things:
我想分享我如何设置我的 Angular/Java 项目。一些重要的事情：
There's only a single Maven project and it allows me to build the entire project. In this way, I can build the entire project or build client and backend separately.
My project is based on Spring Boot framework. However, you can easily adapt my solution to your situation. I generate the
outputcode of Angular project is put under the `META-INF' folder. You can obviously change it if you don't use Spring Boot.In my project, I want to publish the angular project in the
publicfolder.When I develop, I run the Angular project and the backend project separately: Angular with
ng serveand the backend project (the Java part) in the IDE (Eclipse).
只有一个 Maven 项目，它允许我构建整个项目。这样，我可以构建整个项目或分别构建客户端和后端。
我的项目基于 Spring Boot 框架。但是，您可以轻松地根据您的情况调整我的解决方案。我生成的
outputAngular项目的代码放在`META-INF'文件夹下。如果不使用 Spring Boot，显然可以更改它。在我的项目中，我想在
public文件夹中发布 angular 项目。我开发的时候，分别运行Angular项目和后端项目：Angular with
ng serve和IDE（Eclipse）中的后端项目（Java部分）。
Ok, let's start. The entire project structure is represented in the following picture.
好的，让我们开始吧。整个项目结构如下图所示。
As you can see, I put the Angular project in the 'src\main\ngapp' folder. For the Java project (the backend) I used Eclipse IDE, for the Angular project I used Webstorm. You can choose your preferred IDE to manage the project. The important thing: you will need two IDE to manage the entire project.
如您所见，我将 Angular 项目放在 'src\main\ngapp' 文件夹中。对于 Java 项目（后端），我使用了 Eclipse IDE，对于 Angular 项目，我使用了 Webstorm。您可以选择您喜欢的 IDE 来管理项目。重要的是：您将需要两个 IDE 来管理整个项目。
To build the Angular project with Maven, I used the following maven profile definition.
为了使用 Maven 构建 Angular 项目，我使用了以下 Maven 配置文件定义。
<profile>
<id>build-client</id>
<build>
<plugins>
<plugin>
<groupId>com.github.eirslett</groupId>
<artifactId>frontend-maven-plugin</artifactId>
<version>1.3</version>
<configuration>
<nodeVersion>v10.13.0</nodeVersion>
<npmVersion>6.4.1</npmVersion>
<workingDirectory>src/main/ngapp/</workingDirectory>
</configuration>
<executions>
<execution>
<id>install node and npm</id>
<goals>
<goal>install-node-and-npm</goal>
</goals>
</execution>
<execution>
<id>npm install</id>
<goals>
<goal>npm</goal>
</goals>
</execution>
<execution>
<id>npm run build-prod</id>
<goals>
<goal>npm</goal>
</goals>
<configuration>
<arguments>run build</arguments>
</configuration>
</execution>
<execution>
<id>prod</id>
<goals>
<goal>npm</goal>
</goals>
<configuration>
<arguments>run-script build</arguments>
</configuration>
<phase>generate-resources</phase>
</execution>
</executions>
</plugin>
</plugins>
</build>
</profile>
As you can see, I used the com.github.eirslett:frontend-maven-pluginplugin to install node and run npm to build the Angular project. In this way, when I run the maven profile build-clientThe plugin is used to:
如您所见，我使用该com.github.eirslett:frontend-maven-plugin插件安装 node 并运行 npm 来构建 Angular 项目。这样，当我运行 maven profilebuild-client插件时，用于：
Check and install, if it is needed, the node version
v10.13.0in the Angular project foldersrc/main/ngapp/Run the command
npm run build. In the Angular project is defined the build alias in thepackage.json
检查并安装，如果需要，
v10.13.0Angular 项目文件夹中的节点版本src/main/ngapp/运行命令
npm run build。在 Angular 项目中定义了构建别名package.json
"scripts": {
"ng": "ng",
"start": "ng serve --proxy-config proxy.conf.json",
"build": "ng build --configuration=production",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
}
The Angular client must be place in publicfolder of the web application. To do this, the Angular project is configured to have the baseHref=/public. Moreover, the builded project must be place in src/main/resources/META-INF/resources/public. In angular.jsonyou will find:
Angular 客户端必须放在publicWeb 应用程序的文件夹中。为此，Angular 项目配置为具有baseHref=/public. 此外，构建的项目必须放在src/main/resources/META-INF/resources/public. 在angular.json你会发现：
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"baseHref":"/public/",
"outputPath": "../resources/META-INF/resources/public",
...
In a no-Spring Boot project you probably need to put the builded angular project directly in src/main/webapp/publicfolder. To do this, just modify the angular.jsonfile as you need.
在非 Spring Boot 项目中，您可能需要将构建的 angular 项目直接放在src/main/webapp/public文件夹中。为此，只需angular.json根据需要修改文件。
You can find all the project's code in my github project. The plugin project is here.
您可以在我的 github 项目中找到该项目的所有代码。插件项目在这里。
回答by Prashanth
<plugin>
<groupId>com.github.eirslett</groupId>
<artifactId>frontend-maven-plugin</artifactId>
<version>1.3</version>
<configuration>
<nodeVersion>v10.13.0</nodeVersion>
<npmVersion>6.4.1</npmVersion>
<workingDirectory>src/main/ngapp/</workingDirectory>
</configuration>
<executions>
<execution>
<id>install node and npm</id>
<goals>
<goal>install-node-and-npm</goal>
</goals>
</execution>
<execution>
<id>npm install</id>
<goals>
<goal>npm</goal>
</goals>
</execution>
<execution>
<id>npm run build-prod</id>
<goals>
<goal>npm</goal>
</goals>
<configuration>
<arguments>run build</arguments>
</configuration>
</execution>
<execution>
<id>prod</id>
<goals>
<goal>npm</goal>
</goals>
<configuration>
<arguments>run-script build</arguments>
</configuration>
<phase>generate-resources</phase>
</execution>
</executions>
</plugin>
