typescript - Gestionarea reîncărcării F5 în Angular

Am o problemă cu proiectul meu Angular. În modul dezvoltare (ng s) funcționează normal și după apăsarea tastei F5, pagina se reîncarcă corect și funcționează bine.

Când construiesc și distribui proiectul pe serverul la distanță, totul funcționează bine, dar după ce apăs tasta F5, pagina se reîncarcă și afișează eroarea 404 - nu a fost găsit. Ce fac greșit?

Modulul meu de router:

const routes: Routes = [
  // hlavní cesty routingu
  { path: "login", component: LoginComponent },
  { path: "registration", component: RegisterComponent },
  { path: "resetPassword", component: ResetPasswordComponent },
  { path: "resetPasswordNew", component: InsertNewPasswordComponent },

  {path: "system",
  component: MainComponentComponent, 
  canActivate: [AuthGuard], // Auth guard mi vrací true nebo false podle toho, zda už mám načtený token nebo ne
  children: [ 
    { path: 'dashboard', component: DashboardComponent, canActivate: [RoleGuardService]},  //RoleGuardService mi hlídá, zda je lognutý žák nebo učitel
    { path: 'baterie'  , component: BaterieComponent},
    { path: 'settings' , component: SettingsComponent,
    children: [
      {path: 'info' , component: InfoComponent, canActivate: [RoleGuardService]}
    ]
    },
    { path: '', redirectTo: 'dashboard', pathMatch: 'full', },
  ]
  },

  { path: '', redirectTo: 'login', pathMatch: 'full', },
];

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

Mulțumesc!

Răspuns #1

Ar trebui să citiți documentația Angular - Implementare.

Aplicațiile cu rutare trebuie să revină la index.html

Aplicațiile Angular sunt candidați perfecți pentru a fi servite cu un simplu server HTML static. Nu ai nevoie de un motor pe partea de server pentru a compune dinamic paginile aplicației, deoarece Angular face asta pe partea clientului.

Dacă aplicația folosește routerul Angular, trebuie să configurați serverul să returneze pagina gazdă a aplicației (index.html) atunci când i se cere un fișier pe care nu îl are.

O aplicație rutată ar trebui să suporte „linkuri profunde”. Un link profund este un URL care specifică o cale către un component din aplicație. De exemplu, http://example.com/heroes/42 este un link profund către pagina de detalii a eroului care afișează eroul cu id: 42.

Nu există nicio problemă atunci când utilizatorul navighează către acel URL dintr-un client care rulează. Routerul Angular interpretează URL-ul și navighează către acea pagină și erou.

Dar dând clic pe un link dintr-un e-mail, introducându-l în bara de adrese a browserului sau doar reîmprospătând browserul în timp ce te afli pe pagina cu detalii despre erou — toate aceste acțiuni sunt gestionate de browser în sine, în afara aplicației care rulează. Browserul face o cerere directă către server pentru acel URL, ocolind routerul.

Un server static returnează de rutină index.html atunci când primește o cerere pentru http://example.com/. Dar respinge http://example.com/heroes/42 și returnează o eroare 404 - Nu a fost găsit, cu excepția cazului în care este configurat să returneze index.html în schimb.