如何在基于Maven的Java War项目中设置Angle 4

Question

我变得有点疯狂，因为我找不到在将使用Maven构建的Java War项目中设置angular
4应用程序的指南。这是因为我想将其运行到wildfly服务器中。

有什么帮助吗？

谢谢

Answer 1

我有一个类似的要求，即要有一个源项目，其中要有Java Web服务项目以及angular项目（基于angular-
cli的项目），并且maven构建应该在其中包含所有角度文件的情况下进行战争。我使用了maven-frontend-
plugin
，对基本路径进行了一些配置更改。

目的是创建一个包含所有Java代码以及war根文件夹中所有aot编译的角度代码的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
  • 主要
  • polyfills.ts
  • style.css
  • tsconfig.json
  • 类型
  • 等-等
• tmp
• .angular-cli.json
• .gitignore
• karma.conf.js
• package.json
• 自述文件
• tslint.json
• 等-等

Maven项目-

• src
  • 主要
  • 爪哇
  • 资源
  • 网络应用
    • 网络信息
    • 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>

如上述插件在内部调用“ 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
/（应用程序的上下文路径，否则/如果应用程序没有上下文路径）

使context path成为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它便会引发必要的战争。检查angular’dist’文件夹的所有内容是否都在war文件的根目录中。