如何在基于 Maven 的 java war 项目中设置 angular 4

Question

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

有什么帮助吗？

谢谢

Answer 1

我有类似的要求有一个源项目，它有 java 网络服务项目以及 angular 项目（一个基于 angular-cli 的项目）和 maven build 应该创建一个包含所有 angular 文件的 war。我使用 maven-frontend-plugin 对基本路径进行了一些配置更改。

目标是创建一个 war 文件，其中包含所有 java 代码以及 war 根文件夹中的所有 aot 编译 angular 代码，所有这与单个命令 mvn clean package。

所有这些工作的另一件事是避免 angular-app router urls 和你的 java 应用程序 urls 之间的冲突，你需要使用 HashLocationStrategy。一种在 app.module.ts 中设置的方法如下

app.module.ts -

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

]

Angular 应用程序的文件夹结构如下-

angular-项目

距离
e2e
node_modules
public
来源
- 应用程序
- 资产
- 环境
- favicon.ico
- index.html
- main.ts
- polyfills.ts
- style.css
- tsconfig.json
- typings.d.ts
- 等-等
tmp
.angular-cli.json
.gitignore
karma.conf.js
package.json
README.md
tslint.json
等等 - 等等

Maven 项目 -

来源
- 主要
  - java
  - 资源
  - 网络应用
    - WEB-INF
    - web.xml
angular-项目（将您的 angular 项目放在这里）
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 应该在脚本中有构建命令，如下所示 -

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 调用时，它都会将基本路径添加到 [=188] =].例如，如果我尝试调用 '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 它将创建所需的 war。检查 angular 'dist' 文件夹的所有内容是否在 war 文件的根目录中。

Answer 2

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

与此 post 和 Parth Ghiya 给出的以下 link (how to integrate Angular 2 + Java Maven Web Application) 相反，我认为 angular 项目应该放在在旅游服务模块项目的 webapp 文件夹中。考虑到这一点，我还有其他问题：

一般情况下，dist文件夹下的编译结果都应该放在webapp文件夹下。但是在 dist 文件夹中，并不是所有的 Angular 项目资源（作为图像，css 应该存在于 angular assets 文件夹中，对吗？）
考虑到 node_modules 中的 angular 依赖项，我们是否应该将它们也集成到 webapp 文件夹中？有一个障碍：首先有 Typescript 文件，也应该编译为服务器解释，但也许在自定义应用程序 angular 文件中导入时编译和添加？解决办法是什么？
我们是否应该在 webapp 文件夹中包含来自 angular 项目的其他类型的资源？（就像上面建议的 Scrambo 中的 typings 文件夹 link post）

Answer 3

我尝试了那些说明和其他文章。那些很棒，但是有点模棱两可。所以没有立即得到它的人..检查这个。

GitHub

按照以下说明操作..

将您的 angular 项目添加到 java 项目下。我的 angular 项目名称是 tdf

2.openapp.module.ts（在你的angularproject/src/app/app.module.ts）添加导入和提供程序

import { LocationStrategy, HashLocationStrategy } from '../../node_modules/@angular/common';

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

3.open package.json (angularproject/package.json) 添加 "build": "ng build --prod" 如下所示

{
  "name": "tdf",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
     **"build": "ng build --prod",** //change like this
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },

4.update 你的 pom.xml - 添加 forntend maven 插件 - 添加 ng 构建目录

      <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
          xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
          <modelVersion>4.0.0</modelVersion>

          <groupId>angular</groupId>
          <artifactId>angular7java</artifactId>
          <version>0.0.1-SNAPSHOT</version>
          <packaging>war</packaging>

          <name>angular7java</name>
          <url>http://maven.apache.org</url>

          <properties>
            <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>   
            **<angular.project.location>tdf</angular.project.location>**
            <!--your project name -->
            <angular.project.nodeinstallation>node_installation</angular.project.nodeinstallation>
          </properties>

          <dependencies>
            <dependency>
              <groupId>junit</groupId>
              <artifactId>junit</artifactId>
              <version>3.8.1</version>
              <scope>test</scope>
            </dependency>
          </dependencies>

          <build>
           <plugins>    
                <plugin>
                        <groupId>com.github.eirslett</groupId>
                        <artifactId>frontend-maven-plugin</artifactId>
                        <version>1.6</version>
                        <configuration>
                        <workingDirectory>${angular.project.location}</workingDirectory>
                        <installDirectory>${angular.project.nodeinstallation}</installDirectory>
                         </configuration>
                        <executions>
                            <execution>
                                <id>install node and npm</id>
                                <goals>
                                    <goal>install-node-and-npm</goal>
                                </goals>
                                <configuration>
                                   <nodeVersion>v9.9.0</nodeVersion>
                                </configuration>
                            </execution>

                            <execution>
                                <id>npm install</id>
                                <goals>
                                    <goal>npm</goal>
                                </goals>
                                <!-- Optional configuration which provides for running any npm command -->
                                <configuration>
                                    <arguments>install</arguments>
                                </configuration>
                            </execution>

                             <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>
                <plugin>
            <artifactId>maven-war-plugin</artifactId>
            <configuration>
                <failOnMissingWebXml>false</failOnMissingWebXml>
        <!--         <attachClasses>true</attachClasses>
                <webXml>target/web.xml</webXml>
                <webResources>
                    <resource>
                        <directory>src/main/webapp</directory>
                        <filtering>true</filtering>
                    </resource>
                </webResources> -->
            </configuration>
        </plugin>

                    <plugin>
                        <artifactId>maven-compiler-plugin</artifactId>
                        <version>3.1</version>
                        <configuration>
                            <fork>true</fork>
                            <executable>C:\Program Files\Java\jdk1.8.0_181\bin\javac.exe</executable>

<!--make sure above directory is correct (make it same as your local javac.exe-->
                        </configuration>
                    </plugin>
            </plugins>
        </build>



        </project>

5。右键单击您的 maven 项目 maven - maven install 要么终端：mvn clean install

等待它停止。安装后，您可以看到节点安装文件夹和 war 文件已创建

如何在基于 Maven 的 java war 项目中设置 angular 4

How to setup angular 4 inside a maven based java war project

java

war

maven

wildfly

angular

angular-项目

Maven 项目 -