Tomcat 服务器上的 Angular 应用程序：找不到 /app.js 404 错误答案

【问题标题】：Angular App on Tomcat Server: Unable to find /app.js 404 ErrorTomcat 服务器上的 Angular 应用程序：找不到 /app.js 404 错误
【发布时间】：2016-07-03 14:10:13
【问题描述】：

我通过手动将所有文件复制到 /webapps/(mp app) 文件夹，在 Tomcat 服务器上部署了我的 Angular APP。

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

但是，由于 Resource Not Found 404 错误，Tomcat 无法找到 index.html 中定义的任何 .js 文件，并且页面未正确呈现。 F12调试页面显示的错误截图如下图所示。

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

【问题讨论】：

How to serve static files in my web application on Tomcat的可能重复
尝试在浏览器上打开它：localhost:8080/bar-chart-4/main.css
嗨@RaphaelAmoedo....我让它工作了。我在 server.xml 文件中添加了这一行然后我的页面在打开 localhost:8080/bar-chart-4 时完美呈现

标签： java angularjs tomcat

【解决方案1】：

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

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

在此处查看详细说明的更多信息：https://angular.io/guide/deployment

【讨论】：

【解决方案2】：

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

上下文 docBase="/bar-chart-4" path=""

现在应用在打开http://localhost:8080/bar-chart-4/时加载正常

【讨论】：

我在 tomcat 中部署了多个应用程序。我希望将这个更改添加到 server.xml 不会妨碍我在 Tomcat 上部署的其他应用程序？

【解决方案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“运行构建”，并且我的 package.json 定义了上面定义的上下文根（ng build --base-href /myapp）。这样，我可以使用快速“ng serve”对 UI 进行编码，还可以构建 dist 并在“ng build”中定义上下文根，以便将新版本部署到 tomcat。

【讨论】：