部署到 tomcat 9 (Ubuntu 18.04) 时，Angular 路由不起作用

Question

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

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

1. 运行 ng build --base-href=/angular/ 生成一些文件
2. 将生成的文件复制到 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 错误。当我第一次访问根网址 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 文件夹下。

Answer 1

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

示例:

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

虚拟机上的 url 将为 x.x.x.x:8080/angular/#/{componenturl}