部署到 tomcat 9（Ubuntu 18.04）时，角度路由不起作用

Posted 2023-03-15

【中文标题】部署到 tomcat 9（Ubuntu 18.04）时，角度路由不起作用

【英文标题】：Angular routing not working when deployed to tomcat 9 (Ubuntu 18.04)

【发布时间】：2019-10-15 05:59:36

【问题描述】：

我在自己的 PC 上编写了一个 Angular 项目，当我使用命令 ng serve 在本地运行它时一切正常。现在我想将它部署在 VM 上的 tomcat 上（由我的学校提供​​），因为我的项目需要公开。

我创建了一个 git 存储库并在 VM 上下载了 angular 项目。按照教程在 tomcat 中部署应用程序，仅包含 2 个步骤：

运行ng build --base-href=/angular/生成一些文件 将生成的文件复制到tomcat的/webapps子文件夹中

但它没有按预期工作。在我看来，路由似乎存在问题。

这是我的路由模块：

const appRoutes: Routes = [
  path: 'coachPortal', component: CoachPortalComponent,
  path: 'userPortal', component: UserPortalComponent,
  path: 'users', component: UsersComponent,
  path: 'userDetails/:id', component: UserDetailsComponent,
  path: 'mySessions', component: MySessionsComponent,
  path: '', redirectTo: '/coachPortal', pathMatch: 'full',
  path: '**', component: CoachPortalComponent
];

@NgModule(
  imports: [RouterModule.forRoot(appRoutes)],
  exports: [RouterModule]
)
export class AppRoutingModule  

为了在路线之间导航，我使用了这个旧的简单代码：window.location.href = '/users'; 当我在我的电脑上本地运行它时，这就像一个魅力。

但我猜想在tomcat上部署后它不再工作的原因是因为tomcat添加了前缀angular/。 在我的电脑上本地运行时，网址为 localhost:4200/componenturl。 但在虚拟机上是x.x.x.x:8080/angular/componenturl

但由于路由重定向，我收到 404 错误。当我第一次访问根 url x.x.x.x:8080/angular 时，它与规则 path: '', redirectTo: '/coachPortal', pathMatch: 'full' 匹配。并加载coachPortal 组件并甚至更改 url 为angular/coachPortal。但是刷新页面或者手动输入angular/coachPortal会报404错误。并且所有其他链接也不起作用。

另外，在 coachPortal 上，我有一个带有 src ../../../assets/logo.png 的图像，它显然没有加载，因为 webapps 文件夹中生成的文件具有不同的文件夹结构......我该如何解决这个问题？图片直接在assets文件夹下。

【参考方案1】：

您可以尝试使用useHash: true。对我来说它的工作。

例子：

@NgModule(
    imports: [RouterModule.forRoot(routes,  useHash: true )],
    exports: [RouterModule],
)

VM 上的 url 将是 x.x.x.x:8080/angular/#/componenturl

【讨论】：

它不起作用。根页面是空白的（但控制台中有 404 错误），我输入的任何其他链接在页面上显示 404 错误。

【参考方案2】：

我的理解是，当您尝试导航到通常通过 Angular Routing 解析的虚拟子目录时，当它被部署时，您的网络服务器正在寻找“coachportal”的实际目录，该目录不存在因此返回404. 如果路由已经通过您的应用程序（通过导航按钮等）导航到，Angular Router 将解析它并打开虚拟子目录。您的网络服务器正在阻止路由到达 Angular 路由器以解决它。您的网络服务器检查是否存在实际的文件夹或文件，然后如果没有具有该名称的文件或文件夹，则重定向到您的根以处理路由。对于我在 IIS 上部署的 Web 项目，我包含一个带有以下代码的 web.config 文件：

<configuration>
    <system.webServer>
      <rewrite>
        <rules>
          <rule name="Angular" stopProcessing="true">
            <match url=".*" />
            <conditions logicalGrouping="MatchAll">
              <add input="REQUEST_FILENAME" matchType="IsFile" negate="true" />
              <add input="REQUEST_FILENAME" matchType="IsDirectory" negate="true" />
            </conditions>
            <action type="Rewrite" url="/" />
          </rule>
        </rules>
      </rewrite>
    </system.webServer>
</configuration>

来自这篇文章：Routing in Angular 7 running in subfolder not working correctly 我不确定它是否适用于您的部署设置，但至少应该让您了解可能发生的情况。

对于您的资产文件夹，删除相对目录的 ../s 并将其保留为 assets/logo.png 它应该可以正确处理此问题。你可以在本地测试一下。

编辑：为了清晰起见更改了一些内容

【讨论】：

感谢您的解释！你把 web.config 文件放在哪里？

在编译项目的根目录下。我通常手动将它放在那里，然后确保我的 CI 工具不会删除它。尽管如果您想将其添加为项目的一部分，您可能可以将其作为资产包含在构建中。 Here 是如何实现的。 @EricHer 解决方案应该也能正常工作我只是从不喜欢我的网址中的哈希值。哈希本质上是告诉 Web 服务器忽略哈希之后的所有内容，然后将其发送到根项目并由 Angular 路由器处理。

我刚刚尝试了哈希的东西，但它不起作用:(根页面是空白的（但控制台中有 404 错误），我输入的任何其他 url 在 html 页面上显示 404 错误跨度>

你试过web.config吗？哈希策略在本地有效吗？

抱歉，哈希有效！在运行ng build --base-href=/angular/ 时，它以某种方式生成了一个名为“frontend”的文件夹，因此将该文件夹复制到 /webapps 它也称为“frontend”。我只需要将文件夹重命名为“angular”，现在一切正常！谢谢！

【参考方案3】：

我也遇到了这个问题，找个简单的方法。也许它会帮助别人。 使用 apache-tomcat-7.0.55 和 angular 11。其他版本未测试。

仅基于@Erikher 的回答和更多工作要做：

第一：RouterModule.forRoot(routes, useHash: true)

秒*（可能不需要）*：providers: [provide: LocationStrategy, useClass: HashLocationStrategy],

第三个：将 index.html 中的 base-href 从 '/' 更改为 '#'

然后它对我有用。