Angular navigate directly to lazy loaded module child route

Viewed 3522

I have an Angular module lazy loaded called example.module. In example.module I have two different components called a.component and b.component and a bunch of different sub components both a and b use.

What I would like is that when the module is lazy loaded from the router I can route directly to either one of those two components based on which route the user selected from the parent routing.

The only work around I can think of is making two entirely separate modules each of which is lazy loaded independently with the common code being in a third shared module imported by the two. That seems like a lot more templated code and files I need to produce across my entire application rather then there being some way I can signal to a lazyloaded component to load one of the routes programmatically.

        RouterModule.forChild(
        [
          {
            path: "",
            redirectTo: "component-a" // How do I go to A or B?
          },
          {
            path: "component-a",
            component: ComponentA
          },
          {
            path: "component-b",
            component: ComponentB
          },
        ]

Thanks for your assistance and knowledge on the topic!

Edit - As requested root routing.

const appRoutes: Routes = [
  {
    path: "example",
    loadChildren: "./example.module#ExampleModule",
  },
];

@NgModule({
  imports: [
      RouterModule.forRoot(appRoutes)
  ],
  exports: [
      RouterModule
  ]
})
export class AppRoutingModule { }

Plunk - https://embed.plnkr.co/uiLFu0EBZ00F8sLH836w/

2 Answers
Related