Angular - Route two different paths to different components within the same lazy-loaded submodule

Question

I've two paths /a and /b

In my parent module, I route them to the same child module:

// app-routing.moudle.ts
  {
    path: 'a',
    loadChildren: () => import('./m-child/m-child.module').then(m => m.ChildModule),
  },
  {
    path: 'b',
    loadChildren: () => import('./m-child/m-child.module').then(m => m.ChildModule),
  },

and in child module, I want to route a and b to different components, i.e.

// m-child-routing.module.ts
  {
    path: 'a',
    component: AComponent
  },
  {
    path: 'b',
    component: BComponent
  },

I don't want to redefine routes, i.e. I don't want /a/a or /b/b. I want to keep them simple one level: /a and /b, but still loaded through the same lazy-loaded module.

Is it possible to achieve this? Thank you.

Answer 1

While loading a module via route, you import and load all the children components in the module, which itself contradicts the lazy loading concept u require here, if you only need 'a' component to be loaded for said route host/a you can directly add component: AComponent in your app-routing.module.ts; and similarly for BComponent. This solution is feasible if you load only the a or b component from app-routing and not along with a main component that loads in the child module under path:'' within which a and b fall