使用 Webpack 部署 Angular 2 个应用程序到 Tomcat - 404 错误

Question

我想构建 Angular 2 前端并将其部署到 Tomcat 应用程序服务器。为了开始，我完全遵循了以下介绍中的步骤：https://angular.io/docs/ts/latest/guide/webpack.html.

所以我的项目结构如下（所有文件都和上面介绍的一模一样）：

angular2-webpack
---配置
------helpers.js
------karma.conf.js
------业力测试-shim.js
------webpack.common.js
------webpack.dev.js
------webpack.prod.js
------webpack.test.js
---距离
---node_modules
---public
------css
--------------styles.css
-------图片
--------------angular.png
---源
------应用程序
--------------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 start 分别在控制台或 Webstorm 中 webpack-dev-server --inline --progress --port 3000 →按预期工作

当我运行 npm build 分别 rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail 它构建应用程序时没有错误，输出包文件按预期物理放置在 dist 文件夹中.

距离
---资产
------angular.png
---app.css
---app.css.地图
---app.js
---app.js.地图
---index.html
---polyfills.js
---polyfills.js.地图
---vendor.js
---vendor.js.map

接下来我把dist文件夹的内容复制到一个Tomcat9.0的webapps目录下。当我尝试访问已安装的应用程序时，出现 .css 和 .js 文件 (which can be seen in the attached picture) 的 404 错误。它试图从错误的 URL 获取文件 →“/obv/”丢失。

我真的被困在这里了，我觉得我已经尝试了我在 Internet 上可以找到的关于这个主题的所有内容。

有人可以告诉我我做错了什么吗？提前谢谢你。

Answer 1

问题与标签 <base href="/" /> 有关。当使用像 tomcat 这样的网络服务器或尝试使用 firefox index.html 直接从文件系统加载应用程序时，这是错误的。这必须更改为 <base href="./" />。当应用程序仍有问题时，请检查脚本文件是如何导入的。我尝试将 angular2-webpack 与 tomcat 一起使用，并且还需要更改所有脚本标签以在 src 属性中不使用前导斜杠。

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

对于 webpack，行为由属性 output.publicPath 控制。在 angular2 文档和 angular2-webpack 中，这被设置为

output.publicPath="/"

这导致链接中的绝对路径。删除后，webpack 将使用相对路径，并且脚本和图像的链接有效。

Answer 2

将 "dist" 文件夹复制到 tomcat 中的 "webapps" 文件夹，然后 link localhost:8080/dist 就可以了。（您必须将 "publicPath: '/'" 更改为 "publicPath: '/dist/'" 和运行 "npm 运行 build ）
我的基地：href="/"

Answer 3

我也遇到过类似的情况。 front-end 应用程序已使用 angular-2 和 webpack 准备就绪，我想将其部署在 tomcat 服务器上。我遵循了以下步骤：

运行命令“ng build --prod --bh /[URL you want to extend for production]” 在你的 Angular 2 项目文件夹.
它将在您的 angular2 应用程序中创建 dist 文件夹，并且第 1 步中的 'your-project-name' 将在 tomcat 服务器 URL 上使用。
复制新创建的 dist 文件夹中的所有文件并将它们粘贴到 Java 应用程序的 webapps 文件夹中。
创建 war 文件。
在服务器上部署 war。

希望对您有所帮助！

Answer 4

我不得不使用@alokstar 答案的细微变化。我还必须添加一个“-d”或“--deploy”标志。这可能是由于版本的变化。

我是运行angular-cli版本：1.0.0-beta.28.3

I 运行命令："ng build -prod -bh /my_app -d /my_app" 在 angular2 项目文件夹中。
将 angular2 项目文件夹中 "dist" 文件夹的内容复制到 tomcat/webapp 文件夹中的 "my_app" 文件夹。
启动 tomcat 服务器（如果没有运行）。

注意： * ng 构建文档生产标志为“-prod”而不是“--prod”

我的 tomcat 运行在端口 8080 上，我可以使用以下方式访问应用程序：http://localhost:8080/my_app

Answer 5

如果您没有使用 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 ) 以加载应用程序。

Answer 6

这就是我在 tomcat 上部署应用程序的方式。这完全取决于您在 index.html 中提供的 base href。所有图像应保存在 'assets' 文件夹下。并且项目中任何图像的路径都必须是从该文件夹开始的相对路径，即。

src="assets/img/img1.jpg"

这样做，将消除 找不到文件 的困难，这将在部署应用程序时出现。

现在，这些步骤将完成剩下的工作。

ng build --prod --base-href /myApp - 此命令将添加 base-href='/myApp' 到 index.html
在 tomcat 的 webapps 文件夹中创建文件夹 myApp。
将 dist 文件夹的内容复制到这个 myApp 文件夹。
运行服务器。

应用程序可在 http://localhost:8080/my_app

访问

如果您不想为您的应用程序使用上下文 'myApp'，请尝试执行 base href='./' 或者使用以下命令进行生产构建 ng build --prod

这对我有帮助。希望对你有所帮助。

使用 Webpack 部署 Angular 2 个应用程序到 Tomcat - 404 错误

Deploy Angular 2 App with Webpack to Tomcat - 404 Errors

tomcat

http-status-code-404

webpack

angular