将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错误

回答

相关问题