Angular, url changed but the page is not reloading

My app-routing.module.ts:

{
path: RouteConstant.INIT,
canActivate: [AuthGuard],
data: {
breadcrumb: TitleConstant.INIT,
title: TitleConstant.INIT,
parent: {
breadcrumb: TitleConstant.HOME,
breadcrumbUrl: RouteConstant.DASHBOARD,
},
roles: [Role.USER]
},
children: [
{
path: '',
loadChildren: () => import('./modules/init/init.module').then(m => m.InitModule),
},
{
path: RouteConstant.CONTACT,
loadChildren: () => import('./modules/contact/contact.module').then(m => m.ContactModule),
data: {
title: TitleConstant.CONTACTS,
breadcrumb: TitleConstant.CONTACTS
},
}


My contact-routing.module.ts (children route):

const routes: Routes = [{
path: '',
children: [
{
path: '',
redirectTo: RouteConstant.CONTACT_LIST,
pathMatch: 'full',
},
{
path: RouteConstant.CONTACT_LIST,
component: ContactMainComponent,
data: {
breadcrumb: ''
},
},{
path: RouteConstant.CONTACT_PROFILE_WITH_CLIENT_ID,
component: ContactProfileComponent,
resolve: {
breadcrumb: BreadcrumbResolver
}
}]


when I click the CONTACT breadcrumb it should redirect to RouteConstant.CONTACT_LIST (/contact/list), the url changed but the component is not initializing, why?

Continue reading...