Angular 将应用程序部署到 heroku 时路由不起作用

Question

我在 heroku 上部署了一个应用程序

[https://feupscomputacionapp.herokuapp.com/][1]

所有路由在页面导航时都有效，但在刷新、手动输入或点击返回时，无法识别上一个或当前路由，并出现“无法获取”错误

这是我的应用-routing.module.ts

  const routes: Routes = [
  {path:'',component:HomeComponent},
  {path:'federacion',component:AcercaFederacionComponent},
  {path:'desarrollador',component:AcercaDesarrolladorComponent},
  {path:'perfilDocente',component:AcercaDocentesComponent},
  {path:'proyectos',component:ProyectosComponent},
  {path:'eventos',component:EventosComponent},
  {path:'laboratorios',component:LaboratoriosComponent},
  {path:'lab360/:id',component:Lab360Component},
  {path:'contactanos',component:ContactanosComponent},
  {path:'crudUsuarios',component:CrudUsuariosComponent},
  {path:'crear-usuario',component:CrearUsuarioComponent},
  {path:'login',component:LoginComponent},
  {path:'error',component:Error404Component},
  {path:'editar-usuario/:correo2',component:CrearUsuarioComponent},
  {
    path: 'panel-estudiante',
    pathMatch: 'full',
    component: PanelEstudianteComponent,
    canActivate: [AuthGuard],
    data:{
      role: 'estudiante'
    }
  },
  {
    path: 'perfil-estudiante',
    component: PerfilEstudianteComponent,
    canActivate: [AuthGuard],
    data:{
      role: 'estudiante'
    }
  },
  {
    path: 'publicaciones-estudiante',
    pathMatch: 'full',
    component: PublicacionesEstudianteComponent,
    canActivate: [AuthGuard],
    data:{
      role: 'estudiante'
    }
  },
  
  {
    path: 'chat-estudiante',
    pathMatch: 'full',
    component: ChatEstudianteComponent,
    canActivate: [AuthGuard],
    data:{
      role: 'estudiante'
    }
  },
  {
    path: 'bolsa-estudiante',
    pathMatch: 'full',
    component: BolsaEstudianteComponent,
    canActivate: [AuthGuard],
    data:{
      role: 'estudiante'
    }
  },
  {
    path: 'calendario-estudiante',
    pathMatch: 'full',
    component: CalendarioEstudianteComponent,
    canActivate: [AuthGuard],
    data:{
      role: 'estudiante'
    }
  },
  {
    path: 'reservas-estudiante',
    pathMatch: 'full',
    component: ReservasEstudianteComponent,
    canActivate: [AuthGuard],
    data:{
      role: 'estudiante'
    }
  },
  {
    path: 'aplicaciones-estudiante',
    pathMatch: 'full',
    component: AplicacionesEstudianteComponent,
    canActivate: [AuthGuard],
    data:{
      role: 'estudiante'
    }
  },
  
  {
    path: 'reserva-laboratorios',
    pathMatch: 'full',
    component: ReservaLaboratoriosComponent,
    canActivate: [AuthGuard],
    data:{
      role: 'estudiante'
    }
  },
  {
    path: 'reserva-equipos',
    pathMatch: 'full',
    component: ReservaEquiposComponent,
    canActivate: [AuthGuard],
    data:{
      role: 'estudiante'
    }
  },
  {
    path: 'panel-docente',
    component: PanelDocenteComponent,
    canActivate: [AuthGuard],
    data:{
      role: 'docente'
    }
  },
  {
    path: 'panel-administrador',
    component: PanelAdministradorComponent,
    canActivate: [AuthGuard],
    data:{
      role: 'administrador'
    }
  },
  {path: '**', redirectTo: '', pathMatch: 'full'}
];


@NgModule({
  providers: [CookieService, AuthService,
    AuthGuard,
    {
      provide: HTTP_INTERCEPTORS,
      useClass: TokenInterceptorService,
      multi: true
    }  ],
  imports: [BrowserModule,RouterModule.forRoot(routes),HttpClientModule],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Answer 1

您好，我找到了这篇文章，您可以使用这篇文章来解决这个问题，您可以使用 # 机制。更多你可以在这篇文章中找到 Angular 6 404 After Refresh

如果您使用节点 js 进行部署，您可以参考 Whosebug 流程中的这篇文章：

Angular 将应用程序部署到 heroku 时路由不起作用

Angular routes don't work when deploying an app to heroku

components

routes

node.js

express

angular