使用Webpack将Angular 2 App部署到Tomcat - 404错误

Question

我想构建我的Angular 2前端并将其部署到Tomcat应用程序服务器.为了开始,我完全按照以下介绍的步骤进行操作:https://angular.io/docs/ts/latest/guide/webpack.html.

所以我有以下项目结构(所有文件都与上面提到的引言完全相同):

angular2-webpack
--- config
------- helpers.js
------- karma.conf.js
------- karma-test-shim.js
------- webpack.common.js
------- webpack.dev.js
------- webpack.prod.js
------- webpack.test.js
--- dist
--- node_modules
- --public
------- css
-------------- styles.css
------- images
-------------- 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
---
typings --- karma.conf.js
--- package.json
--- tsconfig.json
--- typings.json
--- webpack.config.js

npm分别webpack-dev-server --inline --progress --port 3000在控制台或Webstorm中启动→按预期工作

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

dist
--- assets
------- angular.png
--- app.css ---
app.css.map
--- app.js
---app.js.map
--- index.html
- --polyfills.js
---polyfills.js.map
--- vendor.js
---vendor.js.map

接下来,我将dist文件夹的内容复制到Tomcat 9.0的webapps目录中.当我尝试访问已安装的应用程序时,我收到.css-和.js文件的404错误(可以在附图中看到).它试图从错误的URL→"/ obv /"中删除文件.

我真的被困在这里,我觉得我已经尝试过在互联网上找到的有关这个主题的所有内容.

有人可以告诉我我做错了什么吗？先感谢您.

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

如果您没有使用HashLocationStrategy,那么刷新将为您提供404 for tomcat部署.在这种情况下,您必须使用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)来加载应用程序.