Tim*_*ler 31
我有类似的要求,有一个源项目,它有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的文件夹结构如下 -
将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>
如上面的插件在内部调用'npm run build',请确保package.json应该在脚本中具有build命令,如下所示 -
的package.json
"scripts": {
-----//-----,
"build": "ng build --prod",
-----//------
}
当有人从浏览器点击应用程序时,应始终加载index.html,这就是为什么要将它作为欢迎文件.对于Web服务,我们可以说我们有路径/ rest-services/*将在稍后解释.
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',那么它实际上会调用' http:// localhost:8080/myapplication/restservices/persons '
的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它将创建所需的战争.检查角度'dist'文件夹的所有内容是否都在war文件的根目录中.
| 归档时间： |
|
| 查看次数： |
35443 次 |
| 最近记录： |