Question

我有一个具有.NET Core后端并托管在Azure上的单页角度应用程序。

如果用户忘记了密码，该应用程序将允许用户重置密码，其过程是向用户发送一封电子邮件，其中包含用于重置密码的链接。

但是，当我单击链接时出现“找不到404页”错误，我知道这是因为该页不存在，因为我希望用户看到的是SPA中的组件。

我有路由设置，当我在开发中运行它时，它可以正常运行，但在托管时却不能。

无论如何，是否可以通过代码或调整我的Azure Web App服务来实现？

我的路由：

export const routes: Routes = [
  { path: '', component: HomeComponent },
  {
    path: '',
    runGuardsAndResolvers: 'always',
    canActivate: [AuthenticateGuard],
    children: [
      { path: 'downloads', component: MenuDownloadsComponent },
      { path: 'user-profile', component: UserProfileComponent }
    ]
  },
  {
    path: '',
    runGuardsAndResolvers: 'always',
    canActivate: [ManagerGuard],
    children: [
      { path: 'manager-dashboard', component: DashboardManagerComponent },
      { path: 'history', component: MenuHistoryComponent }
    ]
  },
  {
    path: '',
    runGuardsAndResolvers: 'always',
    canActivate: [AdminGuard],
    children: [
      { path: 'admin-dashboard', component: DashboardAdminComponent },
      { path: 'user-admin', component: MenuAdminUserComponent },
      { path: 'company-admin', component: MenuAdminCompanyComponent },
      { path: 'software-admin', component: MenuAdminSoftwareComponent },
      { path: 'release-admin', component: MenuAdminReleaseComponent },
      { path: 'item-admin', component: MenuAdminItemComponent },
      { path: 'release-type-admin', component: MenuAdminTypeReleaseComponent },
      { path: 'item-type-admin', component: MenuAdminTypeItemComponent },
      { path: 'uploads', component: MenuUploadsComponent }
    ]
  },
  { path: 'password-reset', component: UserPasswordResetComponent },
  { path: '**', redirectTo: '', pathMatch: 'full' }
];

Answer 1

您在这些路线中定义的错误

{
    path: '', // need some route here
    runGuardsAndResolvers: 'always',
    canActivate: [AuthenticateGuard],
    children: [
      { path: 'downloads', component: MenuDownloadsComponent },
      { path: 'user-profile', component: UserProfileComponent }
    ]
  },
  {
    path: '', // need some route here
    runGuardsAndResolvers: 'always',
    canActivate: [ManagerGuard],
    children: [
      { path: 'manager-dashboard', component: DashboardManagerComponent },
      { path: 'history', component: MenuHistoryComponent }
    ]
  },
  {
    path: '', // need some route here
    runGuardsAndResolvers: 'always',
    canActivate: [AdminGuard],
    children: [
      { path: 'admin-dashboard', component: DashboardAdminComponent },
      { path: 'user-admin', component: MenuAdminUserComponent },
      { path: 'company-admin', component: MenuAdminCompanyComponent },
      { path: 'software-admin', component: MenuAdminSoftwareComponent },
      { path: 'release-admin', component: MenuAdminReleaseComponent },
      { path: 'item-admin', component: MenuAdminItemComponent },
      { path: 'release-type-admin', component: MenuAdminTypeReleaseComponent },
      { path: 'item-type-admin', component: MenuAdminTypeItemComponent },
      { path: 'uploads', component: MenuUploadsComponent }
    ]
  },

您需要具有path: '',的路径。现在，我看到您有4个路由配置，它们具有相同的值path: ''。因此，您需要为另外3条路由。因为您有HomeComponent的默认路由

Answer 2

我发现了答案，它位于Azure Web App设置

您需要添加路径映射来解决对所需组件的重定向，请参见所附的屏幕截图：

要找到所需的路径，我必须访问FTP，可以在“部署中心”选项卡的“ FTP /凭据”下找到Azure中的该地址：

如何从外部URL访问特定的Angular组件？

2 个答案: