如何在基于maven的java war项目中设置angular 4
我变得有点疯狂，因为我无法找到在使用maven构建的java war项目中设置角度4 app的指南。这是因为我想将它运行到wildfly服务器中。
任何帮助？
由于
3 个答案:
答案 0 :(得分：21)
我有一个类似的要求，有一个源项目，它有java web服务项目以及角度项目（基于角度cli的项目）和maven构建应该创建一个包含所有角度文件的战争。我使用maven-frontend-plugin对基本路径进行了少量配置更改。
目标是创建一个war文件，其中包含所有java代码以及war根文件夹中所有已编译的角度代码，所有这些都使用单个命令mvn clean package。
所有这一切工作的另一件事是避免angular-app路由器URL和你的java应用程序URL之间的冲突，你需要使用HashLocationStrategy。一种方法在app.module.ts中设置它，如下所示
app.module.ts -
providers: [
{ provide: LocationStrategy, useClass: HashLocationStrategy },
]
Angular App的文件夹结构如下 -
角项目
- DIST
- E2E
- node_modules
- 公共
- SRC
- 应用
- 资产
- 环境
- 的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项目 -
- SRC
- 主
- 的java
- 资源
- web应用
- WEB-INF
- 的web.xml
- 主
- angular-project（将你的角项目放在这里）
- node_installation
- 的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>
如上所述插件调用＆nbsp;运行构建＆＃39;在内部，确保package.json应该在脚本中具有构建命令，如下所示 -
的package.json
"scripts": {
-----//-----,
"build": "ng build --prod",
-----//------
}
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＆＃39;那么它实际上会调用＆＃39; http://localhost:8080/myapplication/restservices/persons＆＃39;
的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，就会产生所需的战争。检查角度＆＃39; dist＆＃39;的所有内容。文件夹位于war文件的根目录中。
答案 1 :(得分：0)
我有一个类似的问题：我有一个名为Tourism-Services的maven Web应用程序模块，其中包含Web服务，一个maven项目中包含了angular项目（我在src / main / angular5 / tourism文件夹中使用CLI创建了angular项目）
与本帖子相反，并与Parth Ghiya提供的以下链接（how to integrate Angular 2 + Java Maven Web Application）相反，我认为angular项目应放置在Tourism-Services模块项目的webapp文件夹中。考虑到这一点，我还有其他问题：
-
通常，所有dist文件夹中的编译结果都应放在webapp文件夹下。但是在dist文件夹中，并不是所有的Angular项目资源（例如图像，css应该出现在angular资产文件夹中，对吗？）
-
考虑到node_modules中的角度依赖性，我们是否也应将它们集成到webapp文件夹中？有一个障碍：首先有Typescript文件，并且还必须进行编译以供服务器插入，但是当将它们导入到自定义应用程序角度文件中时，也许会进行编译和添加？解决方案是什么？
-
我们是否应该在webapp文件夹中包含来自angular项目的其他类型的资源？ （如上面链接文章中建议的Scrambo那样键入文件夹）
答案 2 :(得分：0)
我尝试了那些说明和其他文章。 这些很棒，但是有点模棱两可。 因此，没有立即得到它的人..对此进行了检查。
按照以下说明进行操作。
- 在Java项目下添加您的angular项目。
我的项目名称是 tdf
2.open app.module.ts（在您的角度项目/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） 如下添加“ 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。更新您的pom.xml -添加forntend Maven插件 -添加ng构建目录
<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。 右键单击您的Maven项目Maven-Maven安装 要么 终端：mvn全新安装
，直到它停止。
安装完成后，您可以看到已创建节点安装文件夹和war文件
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？