Spring4MVCをAngular 2で1台のサーバで実行する

Question

私はangular2を使い慣れていません。角度2のSpringMVC4で可能なファイル構造は何ですか？

画像に示すように、角度2の角度1.1が、ファイル構造のために働く

下記のように非常に異なっており、その成分が駆動され、Iは角度2ファイル構造を使用してい

私は多くを検索しました。私は、front2（angle2を使って）とbackend（server- spring/springbootを使って）を別々に使うことができることを発見しました。 たとえば、フロントエンド：192.168.100.1:4200 とバックエンド：192.168.100.1:8080

だから同じサーバー上angular2とspring4MVCの両方を実行する方法や、一般的なファイル構造がある（192.168.100.1:8080のような） ？

ありがとうございます。回答は高く評価されます！

Answer 1

これまでの回答はありませんが、私は解決策を得ました。私はどうでしたか？

2つのコンテキストが必要です。

（1）角度2プロジェクトと

（2）単一のサーバー上SPRINGMVC + Angular2を実行するために、私たちの主な目標を達成するための手順以下のSpring MVC

フォロー。

1. 通常の動的Webプロジェクトを作成します。
2. springまたはuser maven pom.xmlに必要なすべての依存性を追加する

3. CMDを開き、angular2アプリケーションに移動します。コマンドをヒット、その後

   NGを構築したり、ngのビルドを使用して、このコマンドは "DIST" フォルダが作成され、生産

ためを--prod

NPMをインストールし、すべてのコピーすべてのフォルダを含むファイル

4. これらのファイルとフォルダをWebContentディレクトリに貼り付けます。

5. 最後に、index.htmlのbasehref = "./"を変更する必要があります。これで、サーバーを実行する準備が整いました。または、warファイルをデプロイしてtomcatや他のサーバーに提供することができます。

あなたは残りのWebサービスを使用して、単一のサーバーにangular2と春を実行したい、

されている場合はあなたのホストURLごとにwebServiceEndPointUrlを配置する必要があります。たとえば、localhost：8080でアプリケーションを実行している場合は、URLを保持する必要があります。

webServiceEndPointUrl = "http://localhost:8080/api/user";角側で。 その後、WebContentフォルダに貼り付けてコピーすることができます。

私は、単一のサーバ上でアプリケーションを実行するためにこれらの方法を使用するには、多くの欠点がある知っているが、それは必要にしなければならない場合は、これを辿ることができ

、画像の下springMVC + ANGULAR2のファイル構造を参照してください。 。

角度を変えて何かを変更する場合は、dist distフォルダをすべてコピーしてから展開する必要があります。

Answer 2

あなたはあなたのソリューションを自動化することができます - ちょうど/角度/ DIST /の内容をコピーする（あなたがnodejsをインストールして、角度のプロジェクトをビルドすることが可能な）フロントエンド - のmaven-pluginのを使用してのmaven-リソース - プラグイン.warファイルのルートにディレクトリ（もthis article参照）

<plugin> 
     <groupId>org.apache.maven.plugins</groupId> 
     <artifactId>maven-resources-plugin</artifactId> 
     <version>3.0.2</version> 
     <executions> 
     <execution> 
      <id>default-copy-resources</id> 
      <phase>process-resources</phase> 
      <goals> 
      <goal>copy-resources</goal> 
      </goals> 
      <configuration> 
      <overwrite>true</overwrite> 
      <outputDirectory>${project.build.directory}/${project.artifactId}-${project.version}/</outputDirectory> 
      <resources> 
       <resource> 
       <directory>${project.basedir}/angular/dist</directory> 
       </resource> 
      </resources> 
      </configuration> 
     </execution> 
     </executions> 
</plugin> 

そして（開発中）、あなたはAngular CLIツールでng serveによってrunned nodejsサーバー、上ホットリロード機能を使用することができます。