將Webpack部署到Tomcat的Angular 2應用程序 - 404錯誤

我想要將我的Angular 2前端構建和部署到Tomcat應用程序服務器。爲了開始，我已經完全遵循以下介紹的步驟：https://angular.io/docs/ts/latest/guide/webpack.html。將Webpack部署到Tomcat的Angular 2應用程序 - 404錯誤

所以我有以下項目結構（所有文件都完全一樣在引進上述mentionend）：

angular2-的WebPack
---配置
------- helpers.js
------- karma.conf.js
------- karma-test-shim.js
------- webpack.common.js
----- --webpack.dev.js
------- webpack.prod.js
------- webpack.test.js
--- DIST
--- node_modules
---公共
------- CSS
-------- ------ 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
---分型
- -karma.conf.js
---的package.json
--- tsconfig.json
--- typings.json
--- webpack.config.js

個

NPM在控制檯上或Webstorm分別webpack-dev-server --inline --progress --port 3000開始 →按預期工作

當我運行NPM構建分別爲rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail它建立沒有錯誤，輸出包文件，應用程式物理放置在dist文件夾如預期。

DIST
---資產
------- angular.png
--- app.css
---app.css.map
--- app.js
---app.js.map
--- index.html的
--- polyfills.js
---polyfills.js.map
--- vendor.js
---供應商。 JS。地圖

接下來，我將dist文件夾的內容複製到Tomcat 9.0的webapps目錄中。當我嘗試訪問已安裝的應用程序時，出現.css和.js文件（which can be seen in the attached picture）的404錯誤。它試圖從錯誤的URL中獲取文件→「/ obv /」丟失。

我真的被困在這裏，我有這種感覺，我已經嘗試了一切，我可以在互聯網上找到關於這個話題的一切。

有人能告訴我我做錯了什麼嗎？先謝謝你。

來源

2016-08-18 Smoose28

該問題與標籤<base href="/" />有關。當使用像tomcat這樣的web服務器或試圖直接從文件系統加載應用程序時，這只是錯誤的，firefox index.html。這必須更改爲<base href="./" />。當應用程序仍然存在問題時，請檢查腳本文件的導入方式。我試圖在tomcat上使用angular2-webpack，並且還需要將所有腳本標記更改爲不使用帶有src屬性的前導斜槓。

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

隨着webpack的行爲是由屬性output.publicPath控制。在angular2 documentation並在angular2-webpack這是設置爲

output.publicPath="/"

導致在鏈接的絕對路徑。當被移除的webpack將使用相對路徑和腳本和圖像的鏈接工作。

來源

2016-08-19 12:49:40 mszalbach

謝謝你幫助我這麼快（我失明瞭）。我在app.component.html中有這個標記。 Webpack將src屬性更改爲以下內容：。由於主導斜槓它找不到它。有沒有Webpack添加這個斜線的配置或者什麼，或者你如何處理這個問題？ – Smoose28

由於webpack.config.js（或任何其他webpack配置文件）中的「output.publicPath ='/'」，所以添加了前導斜槓。當這被刪除時，默認是一個相對路徑而不是絕對路徑。 – mszalbach

今日英雄！有用！。非常感謝。我已經在玩「output.publicPath」和「」了，我可以發誓我以前嘗試過，但沒有成功。 – Smoose28

將「dist」文件夾複製到tomcat中的「webapps」文件夾並鏈接localhost：8080/dist將會起作用。（你必須改變「publicPath： '/'」到「publicPath： '/距離/'」並運行「NPM運行編譯）
我的基地：HREF =」/」

來源

2017-02-01 15:55:35

我也有類似。狀況前端應用程序已經準備好使用的角-2和的WebPack，我想部署它Tomcat服務器上我遵循以下步驟：

運行命令「NG建立--prod --bh/[您想要擴展以用於製作的URL]「在您的Angular 2項目文件夾中。
它將在您的angular2應用程序中創建dist文件夾&步驟1中的'your-project-name'將用於tomcat服務器URL。
複製新創建的dist文件夾的所有文件&將它們粘貼到Java應用程序的webapps文件夾中。
創建war文件。
在服務器上部署該戰爭。

希望它有幫助！

來源

2017-02-10 02:48:47 alokstar

我不得不使用@ alokstar的答案的一個微小變化。我還必須添加「-d」或「--deploy」標誌。這可能是由於版本的變化。

我正在運行angular-cli版本：1.0.0-beta.28。3

我在angular2項目文件夾中運行了命令：「ng build -prod -bh/my_app -d/my_app」。
將angular2項目文件夾中「dist」文件夾的內容複製到tomcat/webapp文件夾中的「my_app」文件夾中。
啓動tomcat服務器（如果沒有運行）。

注：http://localhost:8080/my_app

： *納克構建文檔製作標誌爲「-prod」，而不是「--prod」

在端口8080上運行的Tomcat我，我可以使用訪問應用程序

來源

2017-03-16 17:55:57 Ashutosh

你剛纔提到的和它的工作，角度1.0.0。謝謝！ – XMight

如果您沒有使用HashLocationStrategy，那麼刷新會爲您提供用於tomcat部署的404。在這種情況下，您必須將web.xml用於您的解決方案，並提供指向index.html的所有路由。這裏是你可以申請你的路徑的代碼片段，然後Angular路由會處理這個。

<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）加載應用程序。

來源

2017-06-23 17:31:54

感謝編寫servlet映射到所有的路由已經奏效 –

將Webpack部署到Tomcat的Angular 2應用程序 - 404錯誤

回答

相關問題