routing is not working for different routes while using lazy loading in Angular 6

Question

Actually i am facing problem while establishing lazy loading in my app. I am using angular 6. Here is scenario-

In my app-routing.module.ts i have following routes-

const appRoutes: Routes = [

  {
    path: '',
    redirectTo: 'dashboard', pathMatch: 'full'
  },
  {
    path:'home',
    loadChildren: './main/home/home.module#HomeModule'
  }

  { path: '**', redirectTo: '/404' }
];

In my home.module.ts i have this routes-

const routes: Routes = [

  {
    path: '',
    component: HomeComponent
  },
  {
    path:'list',
    component: ListComponent
  }

];

Now want to navigate just like below-

1. /home---> HomeComponent
2. /list---> ListComponent

I can navigate to HomeComponent but can't navigate to ListComponent .can anyone help me how can i achieve this. Thank you

Answer 1

In order to access to list lazy loaded route the only way is through home route aka (localhost:4200/home/list)

const appRoutes: Routes = [

  {
    path: '',
    redirectTo: 'dashboard', pathMatch: 'full'
  },
  {
    path:'home',
    loadChildren: './main/home/home.module#HomeModule'
  },

  { path: '**', redirectTo: '/404' }
];

const routes: Routes = [

  {
    path: '',
    component: HomeComponent
  },
  {
    path:'list',
    component: ListComponent
  }

];

According to code that you provided, all the components that come under the home module will start with route prefix home. After starting the application you can access sign-in component using:

http//:localhost:4200/home/list