How to implement lazy loading for a multi-tier application

Question

I have a 3-tier application and I'm having problems with the architecture. Here are the example urls:

/ (base url)
dummy-configuration/
dummy-configuration/dummyModel   
dummy-configuration/dummyModel/dummyData

So I've got a dummy config module, an dummyModel module and a dummyData component. However, I only put router outlet directives in the app component html and the dummy config html. This is where I first went wrong, I believe. Don't I need a router outlet at each level?

My app-routing.module file lazy loads my dummy configuration module :

 {
    path: 'dummy-configuration',
    loadChildren: () =>
      import('./dummy-configuration/dummy-configuration.module').then(
        (p) => p.DummyConfigurationModule
      ),
  }

The dummy configuration routing module then lazy loads its children:

children: [
  {
    path: {PATH},
    loadChildren: () =>
      import('../dummyModel/dummy-model.module').then((m) => m.DummyModule),
  }
]

And the Dummy module will load its children:

children: [
  {
    path: 'childOne',
    component: childOneComponent,
  },
  {
    path: 'childTwo',
    component: childTwoComponent,
  }
]

What I've achieved is lazy loading of the dummy config and "dummy model" modules. But what I want is also to lazy load the component routes for the dummy model and I don't know how to do it. How can I re-architect this correctly? Honestly, I'm a little lost.

Answer 1

If you use the children attribute you do need a router-outlet in which the children can be rendered. In your case though, you can just add the first module just like you showed by loading it at the plan-configuration path.

The second module you can just load at the plan-configuration/fsa path, wit will then correctly handle the profile and dependents routes without needing another router-outlet but instead being rendered in the main one.

In short, just import the ra-fsa module in app-routing with plan-configuration/fsa as your path.