web-dev-qa-db-ja.com

構成angular 2プロジェクトとMavenおよびSpring REST

小さなアプリケーションをangular 1からangular 2にアップグレードしたかった。angular 2とノードに少し慣れていない構成。私のWebアプリケーションはEclipseとMavenを使用しています。問題は、angular 2）を使用して構成できなかったことです。

どのディレクトリ構造を使用する必要がありますか？

利用可能なMavenプラグインがありますが、angular 2アプリのディレクトリ構造について少し混乱しています。

node.jseclipsespringmavenangular
7
RohanB

ここからangular site は、angular 2プロジェクトを構築する方法のいくつかのデモンストレーションを示しています。EclipsemavenWebアプリではクライアント側のファイルを、web-infフォルダーと同じレベルのsrc/main/resourcesフォルダーで起動します。

Maven pom.xml、これをプロジェクトに含めます。 Maven-fronted-pluginを本番環境に使用しないでください。 Mavenは、このセットアップでプロジェクトルートレベルにnodeとnode_modulesの2つのフォルダーをインストールします。

<build>
   <plugins>    
        <plugin>
                <groupId>com.github.eirslett</groupId>
                <artifactId>frontend-maven-plugin</artifactId>
                <version>1.0</version>
                <executions>
                    <execution>
                        <id>install node and npm</id>
                        <goals>
                            <goal>install-node-and-npm</goal>
                        </goals>
                        <configuration>
                            <nodeVersion>v5.3.0</nodeVersion>
                            <npmVersion>3.3.12</npmVersion>
                        </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>
                </executions>
            </plugin>
    </plugins>
</build>

package.jsonは、mavenクリーンインストールの前にこれをプロジェクトのルートレベルに追加します。

{
  "name": "budget_calculator",
  "version": "1.0.0",
  "dependencies": {
    "@angular/common":  "2.0.0-rc.1",
    "@angular/compiler":  "2.0.0-rc.1",
    "@angular/core":  "2.0.0-rc.1",
    "@angular/http":  "2.0.0-rc.1",
    "@angular/platform-browser":  "2.0.0-rc.1",
    "@angular/platform-browser-dynamic":  "2.0.0-rc.1",
    "@angular/router":  "2.0.0-rc.1",
    "@angular/router-deprecated":  "2.0.0-rc.1",
    "@angular/upgrade":  "2.0.0-rc.1",
    "systemjs": "0.19.27",
    "core-js": "^2.4.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "^0.6.12",
    "angular2-in-memory-web-api": "0.0.10",
    "bootstrap": "^3.3.6"
  }
}
6
Grim

これが私がしたことです：-

  • Nodejs v6.9 +をインストールします
  • npm install @ angular/cli –gfor Angular CLI
  • Apache Mavenをインストールするか、Maven対応のIDEを使用します
  • 必要なMaven構成を使用します。私は単純なwebapp（WAR）を使用しました。

Directory Stucture（ngappを除いて、フォルダーの残りは標準のMaven構造です。）

ngfirst
├── pom.xml
├── src
│   └── main
│       ├── Java
│       ├── resources
│       ├── webapp
│       └── ngapp

角度部分

ターミナルでngappフォルダーを開き、ng initコマンドを入力してノードを初期化し、 npm構成の場合、結果は単純なAngular2サンプルアプリケーションになり、ngappフォルダー内の次のディレクトリ構造になります。-

             ├── angular-cli.json
             ├── e2e
             ├── karma.conf.js
             ├── node_modules
             ├── package.json
             ├── protractor.conf.js
             ├── README.md
             ├── tslint.json
             ├── src
                 ├── app
                 ├── assets
                 ├── environments
                 ├── favicon.ico
                 ├── index.html
                 ├── main.ts
                 ├── polyfills.ts
                 ├── styles.css
                 ├── test.ts
                 └── tsconfig.json

この構造はAngular Mavenプロジェクト構造と同等であり、srcディレクトリはAngular maven buildコマンドと同様に、アプリケーションのソースはtargetフォルダーに出力を生成します、ng buildコマンドは、その出力をdistフォルダーに生成します。

生成されたAngularアプリケーションをMavenで生成されたWAR内にパッケージ化するには、ビルド構成を変更して、出力フォルダーをdistから変更します。 webappに移動し、angular-cli.jsonファイルを開いて、そのoutDirを変更します以下のように：-

"outDir": "../webapp/ng"

この時点でng buildコマンドはビルドされたAngularアプリケーション内部ngngfirst/src/main /webappフォルダーのディレクトリ。

Mavenパーツ

Pom.xmlを開き、次の3つのMavenプラグインを構成します。-

  1. compiler-plugin：いいえJava/src/main /ngappフォルダー、除外します。
  2. war-plugin：/ src/main /ngappはAngularプロジェクトフォルダーであり、WARにパッケージ化しないでください。除外してください。
  3. exec-plugin：NPMインストールコマンドとAngular-CLIビルドコマンドを実行してAngular最終パッケージ用のwebappフォルダー内のアプリケーションを生成します。webappのコンテキストパスからAngularリソースをロードするには、引数-base-hrefが必要です。

これがどのように見えるべきかです：-

<plugins>
    <plugin>
        <groupId>org.Apache.maven.plugins</groupId>
        <artifactId>maven-compiler-plugin</artifactId>
        <version>3.3</version>
        <configuration>
            <excludes>
                <exclude>ngapp/**</exclude>
            </excludes>
        </configuration>
    </plugin>
    <plugin>
        <groupId>org.Apache.maven.plugins</groupId>
        <artifactId>maven-war-plugin</artifactId>
        <version>3.0.0</version>
        <configuration>
            <excludes>
                <exclude>ngapp/**</exclude>
            </excludes>
        </configuration>
    </plugin>
    <plugin>
        <groupId>org.codehaus.mojo</groupId>
        <artifactId>exec-maven-plugin</artifactId>
        <version>1.5.0</version>
        <executions>
            <execution>
                <id>exec-npm-install</id>
                <phase>generate-sources</phase>
                <configuration>
                    <workingDirectory>${project.basedir}/src/main/ngapp</workingDirectory>
                    <executable>npm</executable>
                    <arguments>
                        <argument>install</argument>
                    </arguments>
                </configuration>
                <goals>
                    <goal>exec</goal>
                </goals>
            </execution>
            <execution>
                <id>exec-npm-ng-build</id>
                <phase>generate-sources</phase>
                <configuration>
                    <workingDirectory>${project.basedir}/src/main/ngapp</workingDirectory>
                    <executable>ng</executable>
                    <arguments>
                        <argument>build</argument>
                        <argument>--base-href=/ngfirst/ng/</argument>
                    </arguments>
                </configuration>
                <goals>
                    <goal>exec</goal>
                </goals>
            </execution>
        </executions>
    </plugin>
</plugins>

Building Maven Project（およびAngularアプリも）

プロジェクトのルートフォルダーngfirstでターミナルを開き、mvn packageコマンドを実行します。 targetフォルダーにWARファイル（ngfirst.war）を生成します。

ngfirst.warをコンテナーにデプロイし、 http：// localhost：8080/ngfirst/ng/index.html を開きます。ブラウザ。 （必要に応じてホスト名とポートを調整します）

すべてがうまくいけば、ブラウザにアプリが機能する！、つまりAngularアプリケーションが機能している!!

JSP前処理

Angular application、Angular SPAはJavaによって提供され、JSPテクノロジーの動的構成およびページレンダリング機能を活用できます。通常のHTMLページとしてのコンテナindex.htmlこの場合、HTMLファイルも前処理するようにJSPエンジンを構成すると、すべてのJSPマジックはAngular SPAページ内に含まれています。次の内部web.xmlを含めるだけです。

<servlet-mapping>
    <servlet-name>jsp</servlet-name>
    <url-pattern>*.html</url-pattern>
</servlet-mapping>

Mavenプロジェクトを保存、再構築し、WARと出来上がりをデプロイします!!

11
J_Dev