如何在基于maven的java war项目中设置angular 4 [英] How to setup angular 4 inside a maven based java war project
问题描述
我变得有点疯狂，因为我找不到在使用maven构建的java war项目中设置角度4 app的指南。这是因为我想将它运行到一个wildfly服务器。
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.
任何帮助？
谢谢
推荐答案
我有一个类似的要求，有一个源项目有java web服务项目和角项目（一个基于角度cli的项目） ）和maven build应该在其中创建一个包含所有角度文件的战争。我使用 maven-frontend-plugin ，对基本路径进行了少量配置更改。
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-plugin with few configuration changes for base path.
目标是创建一个war文件，其中包含所有java代码以及war根文件夹中所有已编译的角度代码，所有这一切都使用单个命令 mvn clean package 。
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.
所有这一切工作的另一件事是避免angular-app路由器URL和你的java应用程序URL之间的冲突，你需要使用HashLocationStrategy。一种方法在app.module.ts中设置，如下所示
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
app.module.ts -
app.module.ts -
providers: [
{ provide: LocationStrategy, useClass: HashLocationStrategy },
]
Angular App的文件夹结构如下 -
Folder structure for Angular App is below-
- dist
- e2e
- node_modules
- public
- src
- app
- assets
- 环境
- favicon.ico
- index.html
- main.ts
- polyfills.ts
- style.css
- tsconfig.json
- typings。 d.ts
- etc-etc
- 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
- main
- java
- 资源
- webapp
- WEB-INF
- web.xml
- src
- main
- java
- resources
- webapp
- WEB-INF
- web.xml
将maven-frontend-plugin配置添加到pom.xml
Add maven-frontend-plugin configuration to 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命令脚本如下 -
As above plugin call 'npm run build' internally, make sure package.json should have build command in script like below -
package.json
package.json
"scripts": { -----//-----, "build": "ng build --prod", -----//------ }当有人从浏览器点击应用程序时，应始终加载index.html这就是为什么把它变成一个欢迎文件。对于Web服务，我们可以说路径/ rest-services / *将在稍后解释。
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.
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>如果您的应用程序没有任何上下文路径并且部署在根路径上，则上述配置就足够了服务器。但是，如果您的应用程序有任何上下文路径，如 http：// localhost：8080 / myapplication / ，则对索引进行更改.html文件 -
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 -
angular-project / src / index.html - 这里document.location将是myapplication /（否则/应用程序的上下文路径）没有上下文路径）
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-app的基本路径的目的是，无论何时从angular进行ajax http调用，它都会将基本路径添加到网址。例如，如果我尝试调用'restservices / persons'，那么它实际上会调用' http：// localhost ：8080 / myapplication / restservices / persons '
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'
index.html
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文件的根目录中。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.这篇关于如何在基于maven的java war项目中设置angular 4的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
- main
