Question

我已经在Tomcat服务器上部署了我的Angular APP，方法是将所有文件手动复制到/ webapps /（mp app）文件夹。

当我打开http://localhost:8080/bar-chart-4/时，index.html会加载。

但是，Tomcat无法找到index.html中定义的任何.js文件，原因是资源未找到404错误且页面未正确呈现。通过F12调试页面显示的错误的屏幕截图如下图所示。

index.html中的所有.js文件都已相对于项目根文件夹声明。有人可以帮我配置Tomcat以查找我的项目文件夹中的文件而无需更改index.html文件吗？

Answer 1

我在Tomcat下运行Angular应用程序时遇到了同样的问题。我认为使用Context docBase会影响服务器上的所有应用程序。我发现更好的解决方案是在Angular的构建步骤中使用base-href。

例如ng build --base-href / bar-chart-4 /

请查看此处以获取详细说明的详细信息：https://angular.io/guide/deployment

Answer 2

我在server.xml文件中添加了这一行。

上下文docBase =“/ bar-chart-4”path =“”

现在应用程序在打开http://localhost:8080/bar-chart-4/

时加载正常

Answer 3

在package.json中，您可以在构建“ dist”时设置base-href：

{
  "name": "projectname",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --base-href /bar-chart-4/",
... snip...
}

这将在所有参考文献的前面加上“ / bar-chart-4 /”：

<body>
  <app-root></app-root>
    <script src="/bar-chart-4/runtime-es2015.js" type="module"></script>
    <script src="/bar-chart-4/runtime-es5.js" nomodule defer></script>
    <script src="/bar-chart-4/polyfills-es5.js" nomodule defer></script>
    <script src="/bar-chart-4/polyfills-es2015.js" type="module"></script>
    <script src="/bar-chart-4/styles-es2015.js" type="module"></script>
    <script src="/bar-chart-4/styles-es5.js" nomodule defer></script>
    <script src="/bar-chart-4/vendor-es2015.js" type="module"></script>
    <script src="/bar-chart-4/vendor-es5.js" nomodule defer></script>
    <script src="/bar-chart-4/main-es2015.js" type="module"></script>
    <script src="/bar-chart-4/main-es5.js" nomodule defer></script>
</body>

注意：我也必须这样做，因为我将客户端UI（角形）“ dist”文件夹作为Spring应用程序WAR文件（部署在tomcat上）的一部分进行了部署，并且我们总是定义一个上下文根（例如：https://myserver.ext/myApp）。因此，我的应用程序中有一个gradle bruild脚本，该脚本将NpmTask称为“ run build”，而package.json定义了如上定义的上下文根（ng build --base-href / myapp）。这样，我可以使用快速的“ ng serve”对UI进行编码，也可以在将新版本部署到tomcat时构建dist并在“ ng build”中定义上下文根。

Tomcat服务器上的Angular App：无法找到/app.js 404错误

3 个答案: