Mavenベースのangular warプロジェクト内でJava 4をセットアップする方法

Question

Mavenでビルドされるangular warプロジェクト内にJava 4アプリをセットアップするためのガイドを見つけることができないため、少しおかしくなりました。これは、wildflyサーバーで実行するためです。

助けがありますか？

ありがとう

助けがありますか？

ありがとう

TimeTraveler · Accepted Answer

Java Webサービスプロジェクトとangularプロジェクト（angular-cliベースのプロジェクト）があり、mavenビルドがすべてのangularファイル。 maven-frontend-plugin を使用しましたが、ベースパスの構成はほとんど変更していません。

目標は、すべてのJavaコードとすべてのaotコンパイルされたangularコードをwarのルートフォルダーに、すべて単一コマンドmvn clean packageで作成することです。

これが機能するためのもう1つのことは、angular-appルーターのURLとJavaアプリケーションのURLとの競合を避けることです。HashLocationStrategyを使用する必要があります。以下のようにapp.module.tsに設定する1つの方法

app.module.ts-

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

Angularアプリのフォルダー構造は次のとおりです-

角度プロジェクト

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
  - リソース
  - webapp
    - WEB-INF
    - web.xml
angle-project（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 /になります（それ以外の場合はアプリケーションのコンテキストパス/アプリケーションにコンテキストパスがない場合）

コンテキストパスをangle-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が作成されます。 angular 'dist'フォルダーのすべてのコンテンツがroot of warファイルにあるかどうかを確認します。

flamant · Answer

同様の問題があります：Webサービスを含むTourism-Servicesという名前のmaven Webアプリケーションモジュールと、angularプロジェクトを含むmavenプロジェクトがあります（CLIでangularプロジェクトを作成しましたsrc/main/angular5/tourismフォルダー）

この投稿とそれに応じて、Parth Ghiyaによって提供された次のリンク（ Angular 2 + Java Maven Webアプリケーションを統合する方法）に反して、 angularプロジェクトをTourism-Servicesモジュールプロジェクトのwebappフォルダーに配置する必要があること。これを考慮して、さらに質問があります：

通常、distフォルダーでのコンパイル結果はすべてwebappフォルダーの下に配置する必要があります。しかし、distフォルダーには、すべてのAngularプロジェクトリソースがありません（画像として、angular assetフォルダーに存在するはずのcss、そうですか？）
Node_modulesにあるangular依存関係を考慮して、それらをwebappフォルダーにも統合する必要がありますか？ 1つの障害があります。最初にTypeScriptファイルがあり、サーバーによってインタープリトされるようにコンパイルする必要がありますが、カスタムアプリケーションangularファイルにインポートするときにコンパイルおよび追加される可能性があります。解決策は何ですか？
Webappフォルダーのangularプロジェクトからのその他のタイプのリソースを含める必要がありますか？（上記のリンク投稿で推奨されるScramboのタイピングフォルダーのような）

Energy · Answer

これらの指示や他の記事を試しました。これらは素晴らしいですが、少しあいまいです。だから、すぐにそれを手に入れない誰かがこれをチェックします。

GitHub

以下の指示に従ってください。

angularプロジェクトの下にJavaプロジェクトを追加します。私のangularプロジェクト名はtdf

2. app.module.tsを開きます（angular project/src/app/app.module.tsに）インポートとプロバイダーを追加します

import { LocationStrategy, HashLocationStrategy } from '../../node_modules/@angular/common'; providers: [ { provide: LocationStrategy, useClass: HashLocationStrategy }, ],

3. 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を更新します-mavenプラグインを追加します-ビルドディレクトリを追加します

 <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

停止するまで待ちます。インストールすると、ノードインストールフォルダとwarファイルが作成されていることがわかります