私はangular2に慣れていないので、SpringMVC4の可能なファイル構造は何ですか?angular 2?
画像に示すように、Angular 1.xで動作しますが、Angular 2のファイル構造はまったく異なり、そのコンポーネントは駆動されます。 angular 2以下のファイル構造
私は多くを検索し、フロントエンド(angular2を使用)とバックエンド(サーバー-spring/springbootを使用)を別々に使用できることがわかりましたが、アプリケーションを実行するには2つのサーバーが必要です。たとえば、フロントエンド:192.168.100.1:4200およびバックエンド:192.168.100.1:8080
同じサーバーでangle2とspring4MVCの両方を実行する方法や一般的なファイル構造はありますか(192.168.100.1:8080など)?
前もって感謝します。回答は大歓迎です!
今まで答えはありません、私は解決策を得ました。どうやって?
2つのコンテキストが必要です。
(1)Angular 2プロジェクトと
(2)Spring MVC
SPRINGMVC + Angular2を単一サーバーで実行するという主な目標を達成するには、以下の手順に従ってください。
CMDを開き、angular2アプリケーションに移動します。ヒットコマンド
npm installその後
ng buildまたはng build --prodを使用
このコマンドは「dist」フォルダーを作成し、すべてのフォルダーを含むすべてのファイルをコピーします。
それらのファイルとフォルダーをWebContentディレクトリーに貼り付けます。
最後に、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のファイル構造を参照してください
単一のサーバーでアプリケーションを実行するためにこれらの方法を使用することには多くの欠点があることを知っていますが、必要な場合はこれに従うことができます。
angular側で何かを変更した場合、常にdistフォルダーを貼り付けてから展開する必要があります!
ソリューションを自動化できます-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サーバーで使用できます。 。