如何在基于 maven 的 Java War 项目中设置 angular 4

angular java maven war wildfly

2022-09-01 13:08:57

我变得有点疯狂，因为我找不到一个指南，可以在一个Java战争项目中设置一个有角度的4应用程序，该项目将使用maven构建。这是因为我想在Wildfly服务器中运行它。

有什么帮助吗？

谢谢

答案 1

我有类似的要求，有一个源项目，它有java Web服务项目以及angular项目（一个基于angular-cli的项目），maven build应该与其中的所有angular文件一起创建一场战争。我使用了maven-frontend-plugin，对基本路径进行了很少的配置更改。

目标是创建一个war文件，其中包含其中的所有java代码以及war的根文件夹中的所有aot编译的角度代码，所有这些都是通过单个命令完成的。mvn clean package

要使所有这些工作的另一件事是避免角度应用程序路由器URL和Java应用程序URL之间的冲突，您需要使用HashLocationStrategy。在 app.module.ts 中设置它的一种方法，如下所示

app.module.ts -

providers: [
    { provide: LocationStrategy, useClass: HashLocationStrategy },

]

Angular App的文件夹结构如下-

角度项目

断续器
e2e
node_modules
公共
来源
- 应用程序
- 资产
- 环境
- 图标.ico
- 索引.html
- main.ts
- polyfills.ts
- 风格.css
- tsconfig.json
- typings.d.ts
- 等等等等
tmp
.angular-cli.json
.gitignore
karma.conf.js
package.json
README.md
tslint.json
等等 - 等等

Maven Project -

来源
- 主要
  - 爪哇岛
  - 资源
  - 网络应用
    - 网络
    - 网.xml
角度项目（将角度项目放在这里）)
node_installation
啪.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>

由于上面的插件在内部调用“npm run build”，请确保package.json应该在脚本中具有构建命令，如下所示 -

package.json

"scripts": {
    -----//-----,
    "build": "ng build --prod",
   -----//------
}

索引.html应该总是加载，当有人从浏览器点击应用程序时，这就是为什么使它成为一个欢迎文件。对于Web服务，假设我们有路径/rest-services/*，稍后会对此进行解释。

网站.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文件进行更改 -

angular-project/src/index.html - 此处 document.location 将是 myapplication/ （否则是应用的上下文路径 / 如果应用程序没有上下文路径）

使上下文路径成为 angular 应用程序的基本路径的目的是，每当您从 angular 进行 ajax http 调用时，它都会将基本路径附加到 url。例如，如果我尝试调用“restservices/persons”，那么它实际上会调用“http://localhost:8080/myapplication/restservices/persons'

索引.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>

在上述所有更改之后，一旦你运行它将创建所需的战争。检查角度“dist”文件夹的所有内容是否都在war文件的根目录中。mvn clean package

答案 2

我有一个类似的问题：我有一个名为Tourism-Services的maven Web应用程序模块，其中包含Web服务和一个包含角度项目的maven项目（我在src/main/angular5/tourism文件夹中创建了带有CLI的角度项目）

与这篇文章相反，因此与Path Ghiya给出的以下链接（如何集成Angular 2 + Java Maven Web Application）相反，我认为angular项目应该放在Tourist-Services模块项目的webapp文件夹中。考虑到这一点，我还有其他问题：

通常，dist文件夹中的所有编译结果都应放在webapp文件夹下。但是在dist文件夹中，并非所有的Angular项目资源（作为图像，css应该存在于angular assets文件夹中，我是对的吗？
考虑到node_modules中的角度依赖关系，我们是否也应该将它们集成到webapp文件夹中？有一个障碍：首先有Typescript文件和sould也被编译为由服务器插入，但是也许在将它们导入自定义应用程序角度文件时会进行编译和添加？解决方案是什么？
我们是否应该在webapp文件夹中包含来自角度项目的其他类型的资源？（如上面的链接帖子中建议的Scrambo的打字文件夹）