I implemented lazy loading of modules in the following way:
{
path: 'main',
data: {title: ' - '},
component: LandingComponent,
resolve: { images: RouteResolverService },
children: [
{
path: '', redirectTo: 'home', pathMatch: 'full',
},
{
path: 'home',
loadChildren: () => import('../app/home/home.module').then(mod => mod.HomeModule),
},
{
path: 'courses',
loadChildren: () => import('../app/courses/courses.module').then(mod => mod.CoursesModule),
},
{
path: 'students',
loadChildren: () => import('../app/students/students.module').then(mod => mod.StudentsModule),
},
{
path: 'forum',
loadChildren: () => import('../app/forum/forum.module').then(mod => mod.ForumModule),
},
{
path: 'contact',
loadChildren: () => import('../app/contact/contact.module').then(mod => mod.ContactModule),
},
{
path: 'profile',
loadChildren: () => import('../app/profile/profile.module').then(mod => mod.ProfileModule),
}
]
}
If I am on the route 'main/profile' and refresh the page, it automatically navigates to 'main/home'. I understand why this is happening, but I need assistance in preventing this behavior.
My goal is that when I am on 'main/profile' and refresh the page, I should remain on 'main/profile'.