如何在基于 Maven 的 Java 战争项目中设置 angular 4
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45915379/
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 setup angular 4 inside a maven based java war project
提问by Giamma
I'm becoming a bit crazy because I can't find a guide to setup an angular 4 app inside a java war project that will be built with maven. This is because I want to run it into a wildfly server.
我变得有点疯狂，因为我找不到在将使用 maven 构建的 java 战争项目中设置 angular 4 应用程序的指南。这是因为我想将它运行到 Wildfly 服务器中。
Any help?
有什么帮助吗？
Thanks
谢谢
采纳答案by TimeTraveler
I had similar requirement to have one source project which has java web-services project as well as angular project(an angular-cli based project) and maven build should create a war with all angular files in it. I used maven-frontend-pluginwith few configuration changes for base path.
我有一个类似的要求，即拥有一个包含 java web-services 项目以及 angular 项目（一个基于 angular-cli 的项目）的源项目，并且 maven build 应该创建一个包含所有 angular 文件的战争。我使用了maven-frontend-plugin，对基本路径进行了一些配置更改。
The goal was to create a war file with all the java code in it plus all the aot compiled angular code in root folder of war, all this with single command mvn clean package.
目标是创建一个 war 文件，其中包含所有 java 代码以及 war 根文件夹中所有 aot 编译的角度代码，所有这些都使用单个 command mvn clean package。
One more thing for all this to work is to avoid conflict between angular-app router urls and your java application urls, You need to use HashLocationStrategy. one way set it up in app.module.ts like below
使所有这些工作的另一件事是避免 angular-app 路由器 url 和您的 java 应用程序 url 之间的冲突，您需要使用 HashLocationStrategy。一种在 app.module.ts 中设置它的方法，如下所示
app.module.ts -
app.module.ts -
providers: [
{ provide: LocationStrategy, useClass: HashLocationStrategy },
]
Folder structure for Angular App is below-
Angular App 的文件夹结构如下-
angular-project
角度项目
- dist
- e2e
- node_modules
- public
- src
- app
- assets
- environments
- favicon.ico
- index.html
- main.ts
- polyfills.ts
- style.css
- tsconfig.json
- typings.d.ts
- etc-etc
- tmp
- .angular-cli.json
- .gitignore
- karma.conf.js
- package.json
- README.md
- tslint.json
- etc - etc
- 区
- 电子商务
- 节点模块
- 民众
- 源文件
- 应用程序
- 资产
- 环境
- 图标
- 索引.html
- 主文件
- polyfills.ts
- 样式文件
- 配置文件
- 打字.d.ts
- 等等
- 时间
- .angular-cli.json
- .gitignore
- 业力配置文件
- 包.json
- 自述文件
- tslint.json
- 等等 - 等等
Maven Project -
Maven 项目 -
- src
- main
- java
- resources
- webapp
- WEB-INF
- web.xml
- main
- angular-project (place your angular project here)
- node_installation
- pom.xml
- 源文件
- 主要的
- 爪哇
- 资源
- 网络应用程序
- 网络信息
- 网页.xml
- 主要的
- angular-project （将您的 angular 项目放在这里）
- 节点安装
- pom.xml
Add maven-frontend-plugin configuration to pom.xml
将 maven-frontend-plugin 配置添加到 pom.xml
<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>
As above plugin call 'npm run build' internally, make sure package.json should have build command in script like below -
正如上面的插件在内部调用“npm run build”，确保 package.json 应该在脚本中包含 build 命令，如下所示 -
package.json
包.json
"scripts": {
-----//-----,
"build": "ng build --prod",
-----//------
}
index.html should always be loaded when someone hit application from browser that's why make it a welcome file . For web services lets say we have path /rest-services/* will explain this later.
当有人从浏览器点击应用程序时，应该始终加载 index.html，这就是为什么将其设为欢迎文件的原因。对于 Web 服务，假设我们有路径 /rest-services/* 将在稍后解释。
web.xml -
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>
The above configuration is enough if your application does not have any context path and is deployed on root path on server. But if your application has any context path like http://localhost:8080/myapplication/then make changes to index.html file as well -
如果您的应用程序没有任何上下文路径并且部署在服务器的根路径上，则上述配置就足够了。但是，如果您的应用程序有任何上下文路径，例如http://localhost:8080/myapplication/，那么也要对 index.html 文件进行更改 -
angular-project/src/index.html - Here document.location will be myapplication/ (the context path of your app otherwise / if application has no context path )
angular-project/src/index.html - 这里的 document.location 将是 myapplication/（否则应用的上下文路径/如果应用程序没有上下文路径）
The purpose of making context path a base path for angular-app is that whenever you make ajax http call from angular, it will prepend base path to url. for example if i try to call 'restservices/persons' then it will actually make calls to 'http://localhost:8080/myapplication/restservices/persons'
使上下文路径成为 angular-app 的基本路径的目的是，每当您从 angular 进行 ajax http 调用时，它都会将基本路径添加到 url。例如，如果我尝试调用“restservices/persons”，那么它实际上会调用“ http://localhost:8080/myapplication/restservices/persons”
index.html
索引.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>
After all above changes once you run mvn clean packageit will create required war. Check if all the content of angular 'dist' folder is in root of war file.
在运行后所有上述更改后mvn clean package，它将创建所需的战争。检查 angular 'dist' 文件夹的所有内容是否都在 war 文件的根目录中。
回答by flamant
I have a similar issue : I have a maven web application module named Tourism-Services containing the web services and a maven project containing the angular project (I created the angular project with CLI in the src/main/angular5/tourism folder)
我有一个类似的问题：我有一个名为 Tourism-Services 的 Maven Web 应用程序模块，其中包含 Web 服务和一个包含 angular 项目的 Maven 项目（我在 src/main/angular5/tourism 文件夹中使用 CLI 创建了 angular 项目）
contrary to this post and accordingly to the following link (how to integrate Angular 2 + Java Maven Web Application) that was given by Parth Ghiya, I think that The angular project should be placed in the webapp folder of Tourism-Services module project. Considering this I have further questions :
与这篇文章相反，因此与Parth Ghiya 给出的以下链接（如何集成 Angular 2 + Java Maven Web 应用程序）相反，我认为 angular 项目应该放在 Tourism-Services 模块项目的 webapp 文件夹中。考虑到这一点，我还有其他问题：
Normally, all the compilation result in dist folder should be placed under webapp folder. But in dist folder, there are not all the Angular project ressources (as images, css that should be present in angular assets folder, am I right ?)
Considering the angular dependencies that are in node_modules, should we integrate them also in webapp folder ? There is one obstacle : first there are Typescript files and sould be also compiled to be interprated by the server, but maybe there are compiled and added when they are imported in the custom application angular files ? What is the solution ?
Should we includes other type of ressources coming from the angular project in webapp folder ? (like typings folder as suggested Scrambo in the above link post)
通常，dist 文件夹中的所有编译结果都应该放在 webapp 文件夹下。但是在 dist 文件夹中，并不是所有的 Angular 项目资源（作为图像，css 应该存在于 angular assets 文件夹中，对吗？）
考虑到 node_modules 中的 angular 依赖项，我们是否应该将它们也集成到 webapp 文件夹中？有一个障碍：首先有 Typescript 文件，也应该编译为服务器解释，但也许在自定义应用程序角度文件中导入时会编译和添加？解决办法是什么 ？
我们是否应该在 webapp 文件夹中包含来自 angular 项目的其他类型的资源？（就像上面链接帖子中建议的 Scrambo 中的打字文件夹一样）
回答by Energy
I tried those instructions and other articles. those are great however it is a bit ambiguous. So someone who doesn't get it at once .. checks this.
我尝试了这些说明和其他文章。这些很棒，但有点模棱两可。所以没有立即得到它的人..检查这个。
Follow the below instructions..
请按照以下说明操作..
- Add your angular project under java project.
My angular project name is tdf
- 在 java 项目下添加您的 angular 项目。我的角度项目名称是tdf
2.open app.module.ts (in your angular project/src/app/app.module.ts) Add import and providers
2.open app.module.ts（在你的angular project/src/app/app.module.ts中）添加导入和提供者
import { LocationStrategy, HashLocationStrategy } from '../../node_modules/@angular/common';
providers: [
{ provide: LocationStrategy, useClass: HashLocationStrategy },
],
3.open package.json (angularproject/package.json) add "build": "ng build --prod" like below
3.open package.json (angularproject/package.json) 添加 "build": "ng build --prod" 如下
{
"name": "tdf",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
**"build": "ng build --prod",** //change like this
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
4.update your pom.xml -add forntend maven plugin -add ng build directory
4.更新你的pom.xml -add forntend maven plugin -add ng build directory
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>angular</groupId>
<artifactId>angular7java</artifactId>
<version>0.0.1-SNAPSHOT</version>
<packaging>war</packaging>
<name>angular7java</name>
<url>http://maven.apache.org</url>
<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
**<angular.project.location>tdf</angular.project.location>**
<!--your project name -->
<angular.project.nodeinstallation>node_installation</angular.project.nodeinstallation>
</properties>
<dependencies>
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>3.8.1</version>
<scope>test</scope>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>com.github.eirslett</groupId>
<artifactId>frontend-maven-plugin</artifactId>
<version>1.6</version>
<configuration>
<workingDirectory>${angular.project.location}</workingDirectory>
<installDirectory>${angular.project.nodeinstallation}</installDirectory>
</configuration>
<executions>
<execution>
<id>install node and npm</id>
<goals>
<goal>install-node-and-npm</goal>
</goals>
<configuration>
<nodeVersion>v9.9.0</nodeVersion>
</configuration>
</execution>
<execution>
<id>npm install</id>
<goals>
<goal>npm</goal>
</goals>
<!-- Optional configuration which provides for running any npm command -->
<configuration>
<arguments>install</arguments>
</configuration>
</execution>
<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>
<plugin>
<artifactId>maven-war-plugin</artifactId>
<configuration>
<failOnMissingWebXml>false</failOnMissingWebXml>
<!-- <attachClasses>true</attachClasses>
<webXml>target/web.xml</webXml>
<webResources>
<resource>
<directory>src/main/webapp</directory>
<filtering>true</filtering>
</resource>
</webResources> -->
</configuration>
</plugin>
<plugin>
<artifactId>maven-compiler-plugin</artifactId>
<version>3.1</version>
<configuration>
<fork>true</fork>
<executable>C:\Program Files\Java\jdk1.8.0_181\bin\javac.exe</executable>
<!--make sure above directory is correct (make it same as your local javac.exe-->
</configuration>
</plugin>
</plugins>
</build>
</project>
5. right click your maven project maven - maven install or terminal : mvn clean install
5. 右键单击您的 maven 项目 maven - maven install 或终端：mvn clean install
and wait until it stalled.
once it installed, you can see node-installation folder and war file are created
并等到它停滞不前。安装后，您可以看到创建了节点安装文件夹和war文件
