如何在基于 Maven 的 Java 战争项目中设置 angular 4 [英] How to setup angular 4 inside a maven based java war project
问题描述
我变得有点疯狂，因为我找不到在将使用 maven 构建的 java 战争项目中设置 angular 4 应用程序的指南.这是因为我想把它运行到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-services 项目以及 angular 项目(基于 angular-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根文件夹中所有aot编译的角度代码，所有这些都使用单个命令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-
- 分布
- e2e
- node_modules
- 公开
- 源代码
- 应用
- 资产
- 环境
- favicon.ico
- index.html
- main.ts
- polyfills.ts
- style.css
- tsconfig.json
- typings.d.ts
- 等-等
- 源代码
- 主要
- java
- 资源
- 网络应用
- WEB-INF
- web.xml
在 pom.xml 中添加 maven-frontend-plugin 配置
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，这就是为什么将其设为欢迎文件的原因.对于网络服务，假设我们有路径/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 -
<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 调用时，它都会将基本路径添加到 url.例如，如果我尝试调用 '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
<!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之后所有上述更改后，它将创建所需的战争.检查angular '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 战争项目中设置 angular 4的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
- 主要
