LoadChildren navigate to specific route Angular 6

Question

In app.route configuration we have the following routes:

   {
        path: 'homedetails',
        loadChildren: '../app/home/home-details/home-details.module#HomeDetailsModule',
        data: { preload: true, paramKey: 'homekey', paramType: 'number' },
        canActivate: [ParamsGuard]
      },

In lazy loaded modules Home Details route have

const routes: Routes = [{
  path: '',
  component: HomeComponent,
  // canActivate: [AuthGuard],
  children: [
    {
      path: 'Home-properties',
       loadChildren: '../../../app/Home/Home-details/Home-property/Home-property.module#HomePropertyModule',
    },
    {
      path: 'access',
      component: AccessComponent,
      resolve: { 'info-message': InfoMessageResolver }
    },
      {
      path: '',
      redirectTo: 'access',
      pathMatch: 'full'
    }
  ],
}];

Issue is when homedetails path load the lazy loaded module it always navigate to default path 'access' as per business requirement need to load the home-properties instead of default 'access' path.

Load Children always load the default navigation instead of provided routes.

Appreciate any suggestion and solution.

Answer 1

First of all, you should put your redirect as the first route. Secondly, you are redirected to access route because you specified it in your route

{
    path: '',
    redirectTo: 'access',
    pathMatch: 'full'
}

As you mentioned access is the default path, obviously it will go to that route because it's an empty children path. If you really want to go to Home-properties route then that should be your redirect path

Answer 2

In here you could put in Home-properties like this

{
      path: 'Home-properties',
      loadChildren: '../../../app/Home/Home-details/Home-property/Home-property.module#HomePropertyModule',
      pathMatch: 'full',
 },