如何在基於maven的java war項目中設置angular 4

Question

我變得有點瘋狂，因為我找不到在使用maven構建的java war項目中設置角度4 app的指南。 這是因為我想將它運行到wildfly服務器中。

有幫助嗎？

謝謝

Answer 1

我有類似的要求，有一個源項目，它有java web服務項目以及角度項目（基於角度cli的項目）和maven構建應該創建一個包含所有角度文件的戰爭。 我使用了maven-frontend-plugin ，基本路徑的配置更改很少。

目標是創建一個war文件，其中包含所有java代碼以及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
  • 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項目 -

• SRC
  • 主要
    • java的
    • 資源
    • Web應用程序
      • WEB-INF
      • web.xml中
• 角度項目（ 將角度項目放在這里 ）
• 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 /（否則應用的上下文路徑/如果應用程序沒有上下文路徑）

使上下文路徑成為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 ，它將創建所需的war。 檢查角度'dist'文件夾的所有內容是否都在war文件的根目錄中。

Answer 2

我有一個類似的問題：我有一個名為Tourism-Services的maven Web應用程序模塊，其中包含Web服務和包含angular項目的maven項目（我在src / main / angular5 / tourism文件夾中使用CLI創建了角度項目）

與這篇文章相反，並且相應於Parth Ghiya給出的以下鏈接（ 如何集成Angular 2 + Java Maven Web應用程序 ），我認為角度項目應該放在Tourism-Services模塊項目的webapp文件夾中。 考慮到這一點，我還有其他問題：

1. 通常，dist文件夾中的所有編譯結果都應該放在webapp文件夾下。 但是在dist文件夾中，並不是所有的Angular項目資源（作為圖像，css應該出現在angular assets文件夾中，我是對的嗎？）

2. 考慮到node_modules中的角度依賴關系，我們是否應該將它們集成到webapp文件夾中？ 有一個障礙：首先是Typescript文件，並且還可以編譯為由服務器進行交互，但是在自定義應用程序角度文件中導入時可能會編譯和添加？ 解決辦法是什么 ？

3. 我們是否應該包含來自webapp文件夾中的角度項目的其他類型的資源？ （如上面鏈接帖中提到的Scrambo的打字文件夾）

Answer 3

我試過那些說明和其他文章。 那些很棒，但它有點含糊不清。 所以有人不能立刻得到它......檢查一下。

GitHub上

請按照以下說明操作..

1. 在java項目下添加角度項目。 我的角項目名稱是tdf

2.打開app.module.ts（在你的角度項目/ 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.更新你的pom.xml -add forntend maven plugin -add ng build目錄

      <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或terminal：mvn clean install

並等到它停滯不前。 安裝完成后，可以看到創建了node-installation文件夾和war文件