Routing children is not working in angular 8

Question

Trying to resolve routing children issue but could not resolve it.If I click admin button not working it is not redirection for admin section.How to resolve this issue.

Demo:https://stackblitz.com/edit/angular-3mngoh?file=src/app/approuting.module.ts

approuting.module.ts:

const routes: Routes = [ 
 {
 path: 'admin',
 component: AdminSectionComponent,
 children: [ 
 { path: '', loadChildren: () => import('./adminsection/layout/layout.module').then(m =>  m.LayoutModule) },
 { path: 'login', loadChildren: () => import('./adminsection/login/login.module').then(m => m.LoginModule) },
 { path: 'signup', loadChildren: () => import('./adminsection/signup/signup.module').then(m => m.SignupModule) },
 { path: 'error', loadChildren: () => import('./adminsection/server-error/server-error.module').then(m => m.ServerErrorModule) },
 { path: 'access-denied', loadChildren: () => import('./adminsection/access-denied/access-denied.module').then(m => m.AccessDeniedModule) },
 { path: 'not-found', loadChildren: () => import('./adminsection/not-found/not-found.module').then(m => m.NotFoundModule) },
 { path: '**', redirectTo: 'not-found' }

 ]
 },....etc

Answer 1

The routing is not happening because of contradiction on clicking on admin from your UI its looking for /login which is showing not found and giving error .So after analyzing i have found that on commenting line in AdminSection-RoutingModule.ts .This is your code route array replace it by below code.

Your Code:-----------

  const routes: Routes = [
  {path:'',component:AdminSectionComponent,

  children:[

 { path: '', loadChildren: () => import('./layout/layout.module').then(m => m.LayoutModule), canActivate: [AuthGuard] },
    { path: 'login', loadChildren: () => import('./login/login.module').then(m => m.LoginModule) },
    { path: 'signup', loadChildren: () => import('./signup/signup.module').then(m => m.SignupModule) },
    { path: 'error', loadChildren: () => import('./server-error/server-error.module').then(m => m.ServerErrorModule) },
    { path: 'access-denied', loadChildren: () => import('./access-denied/access-denied.module').then(m => m.AccessDeniedModule) },
    { path: 'not-found', loadChildren: () => import('./not-found/not-found.module').then(m => m.NotFoundModule) },
    { path: '**', redirectTo: 'not-found' }
  ]}

];

Replaced Code:--------

    const routes: Routes = [
  {path:'',component:AdminSectionComponent,

  children:[
    { path: 'login', loadChildren: () => import('./login/login.module').then(m => m.LoginModule) },
    { path: 'signup', loadChildren: () => import('./signup/signup.module').then(m => m.SignupModule) },
    { path: 'error', loadChildren: () => import('./server-error/server-error.module').then(m => m.ServerErrorModule) },
    { path: 'access-denied', loadChildren: () => import('./access-denied/access-denied.module').then(m => m.AccessDeniedModule) },
    { path: 'not-found', loadChildren: () => import('./not-found/not-found.module').then(m => m.NotFoundModule) },
    { path: '**', redirectTo: 'not-found' }
  ]}

];

After replacing with myy array routing will happen then you will get to know why routing was not happening