TomcatにWebpackを使用してAngular 2 Appを展開する - 404エラー

Question

Angular 2フロントエンドをビルドしてTomcatアプリケーションサーバーに配備したいと考えています。はじめに、私は次の紹介のステップを正確に実行しました：https://angular.io/docs/ts/latest/guide/webpack.html。

だから私は、次のプロジェクトの構造（導入に上記mentionendよう、すべてのファイルが正確にされている）があります---

angular2-WebPACKの
を設定
------- helpers.js
------- -----
をwebpack.common.js -------

-------カルマテスト-shim.jsをkarma.conf.js --webpack.dev.js
------- webpack.prod.js
-------は
公共------- CSS
-------- --- --- ---
distの
webpack.test.js
をnode_modules ------ Styles.cssを
-------画像
-------------- angular.png
--- SRC
---- --- app
-------------- app.component.css
-------------- app.component.html
- ------------ app.component.spec.ts
-------------- app.component.ts
-------------- app.module.ts
------ -index.html
------- main.ts
------- polyfills.ts
-------はvendor.ts
---タイピング
-

をwebpack.config.js ---
typings.json ---
tsconfig.json ---
--- package.json
を-karma.conf.js予想通り

NPM私はrimraf dist && webpack --config config/webpack.prod.js --progress --profile --bailそれぞれNPMビルドを実行すると、それはエラーなしでアプリケーションを構築し、出力バンドルファイルが物理的にdistのフォルダに置かれます

→作品コンソールまたはWebstormにそれぞれwebpack-dev-server --inline --progress --port 3000をを開始予想通り。

distの
---資産
------- angular.png
--- app.css
---app.css.map
は---
をapp.js ---app.js.map
--- index.htmlを
は--- ---
---polyfills.js.map
をpolyfills.js
---ベンダーをvendor.js。 js。マップ

次は、私は、Tomcat 9.0のwebappsディレクトリへのdistのフォルダの内容をコピーしました。インストールしたアプリにアクセスしようとすると、.css-と.js-ファイル（which can be seen in the attached picture）の404エラーが表示されます。 間違ったURLからファイルを取得しようとしました→ "/ obv /"が見つかりません。

私は本当にここに立ち往生していると私は、私はすでに私はこのトピックに関するインターネットで見つけることができるすべてのものを試してみた感覚を持っています。

私が間違っていることを教えてもらえますか？前もって感謝します。

Answer 1

問題は、タグ<base href="/" />に関連しています。これは、tomcatのようなWebサーバーを使用している場合や、firefox index.htmlというファイルシステムから直接アプリケーションをロードしようとすると間違っています。これは<base href="./" />に変更する必要があります。アプリにまだ問題がある場合は、スクリプトファイルのインポート方法を確認してください。私はangular2-webpackをtomcatで使用しようとしましたが、src属性の先頭にスラッシュを使用しないようにすべてのスクリプトタグを変更する必要もありました。

<script src="js/vendor.js" ></script> 

webpackでは、動作は属性output.publicPathによって制御されます。 angular2 documentationではとangular2-webpackで、これはリンクに絶対パスにつながる

output.publicPath="/" 

に設定されています。削除すると、webpackは相対パスを使用し、スクリプトと画像のリンクが機能します。

Answer 2

• tomcatの "webapps"フォルダに "dist"フォルダをコピーし、localhost：8080/distをリンクしてください。 （あなたは "publicPath： '/'" を変更しなければならない "publicPath： '/ DIST /'" にして実行 "ビルドを実行NPM）
• マイベース：HREF =" /」

Answer 3

私は似ていました。。状況フロントエンドアプリは、角度-2とのWebPACKを使用して準備ができていたと私はTomcatのサーバーにデプロイしたかったが、私は、次の手順に続く：

1. Runコマンドを「NG構築--prod --bh /あなたの角度2プロジェクトフォルダの[あなたが生産のために拡張したいURL]」。

2. あなたのangular2アプリケーションにdistフォルダを作成します&ステップ1のyour-project-nameをtomcatサーバのURLに使用します。

3. 新しく作成したdistフォルダ&のすべてのファイルを、Javaアプリケーションのwebappsフォルダに貼り付けます。

4. warファイルを作成します。

5. は、サーバー上の戦争を展開します。

希望します。

Answer 4

@ alokstarの答えは少し変わっていました。私は "-d"または "--deploy"フラグも追加しなければなりませんでした。これはバージョンの変更によるものです。 1.0.0-beta.28：

私は角-cliのバージョンを実行しています。3

1. 私はangular2プロジェクトフォルダに "ng build -prod -bh/my_app -d/my_app"というコマンドを実行しました。
2. angle2プロジェクトフォルダの "dist"フォルダの内容をtomcat/webappフォルダの "my_app"フォルダにコピーします。
3. tomcatサーバーを起動します（実行していない場合）。

注： *私のTomcatはポート8080で実行されていると "-prod" ではなく "--prod"

としてNGビルド文書の生産フラグ、私が使用してアプリケーションにアクセスすることができます：http://localhost:8080/my_app

Answer 5

HashLocationStrategyを使用していない場合は、更新するとtomcatの展開に404が表示されます。そのような場合は、ソリューションにweb.xmlを使用し、index.htmlを指すすべてのルートを提供する必要があります。パスに適用できるコードスニペットを次に示します。角度ルートがこれを処理します。

<servlet> 
    <servlet-name>index</servlet-name> 
    <jsp-file>/index.html</jsp-file> 
</servlet> 
<servlet-mapping> 
    <servlet-name>index</servlet-name> 
    <url-pattern>/home</url-pattern> 
</servlet-mapping> 

先ほど提案したように、index.html（by）は、アプリケーションを読み込むように設定します。