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 ??

hello, may be you can load moduleB in the second level directly after loading moduleA, in your moduleA.routing.ts, you can have something like {path:'', loadChildren: () => moduleB, pathMatch:'full' } — Fateh Mohamed
– Fateh Mohamed, Commented May 10, 2018 at 8:21
Wil that be even lazy loaded? Looks like it will be bundled into main bundle to me — Antoniossss
– Antoniossss, Commented Sep 18, 2021 at 17:59

GKA · Accepted Answer · 2020-06-10 08:04:49Z

3

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.

answered Jun 10, 2020 at 8:04

GKA

1,3661 gold badge16 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ael Over a year ago

I was trying to use your solution with minor changes, but without any sucess: stackoverflow.com/questions/69235517/… . Did I miss something?

alphapilgrim Over a year ago

This was a huge help, KUDOS!

Wilt · Accepted Answer · 2021-01-29 10:42:32Z

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.

What will happen if user hit '/mypath/' ? Will it lazily load HomeModule and AdvisorModule? I guess not. OP want to load those two modules, if /mypath is hit. You may want to rewrite your solution as it may be very useful.

Collectives™ on Stack Overflow

Angular : Lazy load multiple Modules with the same route

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related