Angular : Lazy load multiple Modules with the same route

Question

I have an app where i want to lazy load two modules in the same moment with the same route path.

My routing module would look like this :

  {
    path: 'mypath',
    loadChildren: () => HomeModule,
    canLoad: [HomeGuard]
  },

   {
     path: 'mypath',
     loadChildren: () => AdvisorModule,
     canLoad: [AdvisorGuard]
   },

but this lead to load only the first one

i cant' find anyway to do it like this for example :

  {
    path: 'mypath',
    loadChildren: () => HomeModule, advisor module // ??
    canLoad: [// ??]
  },

I don't want also to import one of them in the other , as like this , only one module would be lazy loaded and the other automatically

How may it do it ??

Answer 1

You could rework things like this:

const routes: Routes = [
  {
    path: 'mypath/home',
    loadChildren: () => HomeModule,
    canLoad: [HomeGuard]
  },
  {
    path: 'mypath/advisor',
    loadChildren: () => AdvisorModule,
    canLoad: [AdvisorGuard]
  },
]

In other words move the route path to your module outside to the parent module, in this case I assume those are 'adviser' and 'home'

And then just start in the module routing with a redirect solution and/or a path like so:

Home module routing:

const routes: Routes = [
  {
    path: '', // <-- in your current solution probably 'home'
    component: HomeParentComponent,
    children: [
      { path: '', redirectTo: 'childOne', pathMatch: 'full' },
      { path: 'childOne', component: HomeChildComponentOne },
    ],
  },
];

Advisor module routing:

const routes: Routes = [
  {
    path: '', // <-- in your current solution probably 'advisor'
    component: AdvisorParentComponent,
    children: [
      { path: '', redirectTo: 'childOne', pathMatch: 'full' },
      { path: 'childOne', component: AdvisorChildComponentOne },
    ],
  },
];

This works nicely, you should be able to navigate to:

'/mypath/home' and end up inside your HomeParentComponent with router outlet of HomeChildComponent one.

'/mypath/advisor' and end up inside your AdvisorParentComponent with router outlet of AdvisorChildComponent one.

In case you don't want a child component inside your router outlet it is even simpler, you can just remove the child routes and redirect.

---

Note: If this solution doesn't resolve your issue, then please share more details on your module routing so I can get a better picture of your desired route configuration.

Answer 2

You need to re-arrange your routes by one level and you also need to add auxiliary routes for the extra components you want to load.

This works with Angular 9 (probably with 8 too)

{
  path: 'home',
  component: HostingComponentWithOutlets,
  children: [
    {
      path: 'featureOne',
      loadChildren: () => import('xxxxx').then(m => m.FeatureOneModule),
      canLoad: [featureOneGuard]
    },
    {
      path: 'featureTwo',
      outlet: 'outletAux1',
      loadChildren: () => import('yyyyy').then(m => m.FeatureTwoModule),
      canLoad: [featureTwoGuard]
    },
    // you can even load more components to different outlets from the same module
    // and update redirectTo and routerLink accordingly
    //{
    //  path: 'featureThree',
    //  outlet: 'outletAux2',
    //  loadChildren: () => import('yyyyy').then(m => m.featureTwoModule),
    //  canLoad: [featureTwoGuard]
    //},
    {
      path: '',
      redirectTo:
        '/absolute/path/to/home(featureOne/path-to-featureOne-component//outletAux1:featureTwo/path-to-featureTwo-component)',
      pathMatch: 'full'
    }
  ]
},
{ path: '', redirectTo: 'home', pathMatch: 'full' }

Hitting the 'home' route will lazy load all required modules.

In your HostingComponentWithOutlets html template where you need to link to 'featureOne':

<a [routerLink]="featureOne/path-to-featureOne-component"   

and if you want to go straight to the full route with the auxiliary routes from a template:

<a [routerLink]="['.', { outlets: { 'primary': ['featureOne', 'path-to-featureOne-component'], 'outletAux1': ['featureTwo', 'path-to-featureTwo-component'] } }]"   

FeatureOneModule should define 'path-to-featureOne-component' and FeatureTwoModule should define 'path-to-featureTwo-component' in their equivalent route definitions.