web-dev-qa-db-ja.com

単一サーバーでAngular 2を指定してSpring4MVCを実行します

私はangular2に慣れていないので、SpringMVC4の可能なファイル構造は何ですか？angular 2？

enter image description here

画像に示すように、Angular 1.xで動作しますが、Angular 2のファイル構造はまったく異なり、そのコンポーネントは駆動されます。 angular 2以下のファイル構造 enter image description here

私は多くを検索し、フロントエンド（angular2を使用）とバックエンド（サーバー-spring/springbootを使用）を別々に使用できることがわかりましたが、アプリケーションを実行するには2つのサーバーが必要です。たとえば、フロントエンド：192.168.100.1:4200およびバックエンド：192.168.100.1:8080

同じサーバーでangle2とspring4MVCの両方を実行する方法や一般的なファイル構造はありますか（192.168.100.1:8080など）？

前もって感謝します。回答は大歓迎です！

javaspring-mvcangularservletsng2-bootstrap
15
BeingCoders

今まで答えはありません、私は解決策を得ました。どうやって？

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

（1）Angular 2プロジェクトと

（2）Spring MVC

SPRINGMVC + Angular2を単一サーバーで実行するという主な目標を達成するには、以下の手順に従ってください。

  1. 通常のダイナミックWebプロジェクトを作成します。
  2. Springまたはユーザーmaven pom.xmlに必要なすべての依存関係を追加します

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

    npm installその後

    ng buildまたはng build --prodを使用

このコマンドは「dist」フォルダーを作成し、すべてのフォルダーを含むすべてのファイルをコピーします。

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

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

Rest Webサービスを使用していて、angular2とspringを単一サーバーで実行したい場合、

ホストURLごとにwebServiceEndPointUrlを配置する必要があります。たとえば、localhost：8080でアプリを実行している場合、urlを保持する必要があります

webServiceEndPointUrl = " http：// localhost：8080/api/user "; at angular side。その後、貼り付けてWebContentフォルダーを作成およびコピーできます。

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

enter image description here

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

angular側で何かを変更した場合、常にdistフォルダーを貼り付けてから展開する必要があります！

13
BeingCoders

ソリューションを自動化できます-frontend-maven-plugin（nodejsをインストールしてangularプロジェクト）とmaven-resources-plugin/ angular/dist /ディレクトリの内容を.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>

そして、hot reload機能を（開発中に） Angular CLI ツールでng serveによって実行されるnodejsサーバーで使用できます。 。

9
Dan Brandt