Recently, I encountered an issue with my Angular project. During development (using ng s), everything functions normally and upon pressing F5, the page reloads correctly and works fine.
However, when I build and deploy the project to a remote server, all seems well until I press F5, resulting in a 404 error - page not found. What could be causing this issue?
This is my router module configuration:
const routes: Routes = [
// main routing paths
{ path: "login", component: LoginComponent },
{ path: "registration", component: RegisterComponent },
{ path: "resetPassword", component: ResetPasswordComponent },
{ path: "resetPasswordNew", component: InsertNewPasswordComponent },
{path: "system",
component: MainComponentComponent,
canActivate: [AuthGuard], // Auth guard returns true or false based on whether a token is loaded
children: [
{ path: 'dashboard', component: DashboardComponent, canActivate: [RoleGuardService]}, // RoleGuardService checks if user is student or teacher
{ 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 { }
Your insights would be greatly appreciated!