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

Question

I deployed an app on heroku

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

All the routes work when going with the navigation of the page but when refreshing, entering manually or clicking back, the previous or current route is not recognized and an error "Can not get" appears

this is my app-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

Hi i have found this article you can use this article to over come this issue you can use # mechanism. more you can find in this article Angular 6 404 After Refresh

If you are using node.js for the deployment you can refer this article from stackoverflow flow: Getting 404 page on page refresh using node and angular app