Lazy loading auxiliary routes

Question

Here the scenario, I have a mainpage with 3 routes (child of mainpage each lazy loaded).

Here the auxiliary component has one primary outlet and other auxiliary as

<router-outlet name="auxone"></router-outlet>

and this is how my mainpage.route file looks

Now my auxilary route loads perfectly and im able to route in primary outlet with any problem. But as soon as i try to load a route in the auxiliary outlet like this

& try to navigate them using

(Aux route has one child as its own, and im trying to load another route as another child for the same aux) i get errors:

Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'mainpage/aux'

As im unable to see any documentation on how to load and route aux routes lazy loading im at my wits end finding out how to make this work.

where exactly am i going wrong?

Here's my project structure

Marcello di Simone · Answer 1 · 2018-11-15T23:09:33.887

You did nothing wrong, it just was a long lasting bug in angular router, that got fixed (partly) in angular@6.1. Partly because, to achieve your goal, you have to configurate the lazy loaded module in your app routes as unnamed route and instead name the parent route in your lazy loaded module router configuration:

app.routes

const routes: Routes = [
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  },
  {
    /* no name for lazy loaded route */
    path: '',
    loadChildren: './home/home.module#HomeModule'
  },
  {
    /* you can add multiple empty routes without conflicts */
    path: '',
    loadChildren: './about/about.module#AboutModule'
  }
];

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

home.routes

export const homeRoutes: Routes = [
  {
    /* your lazy loaded module route needs to be named */
    path: 'home',
    component: HomeComponent,
    children: [
      {
        path: '',
        component: HomeListComponent
      },
      {
        path: 'form',
        component: HomeFormComponent,
        outlet: 'popup'
      }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(homeRoutes)],
  exports: [RouterModule]
})
export class HomeRoutingModule {
}

while your home component template look like this:

<router-outlet></router-outlet>
<router-outlet name="popup"></router-outlet>

and the routerLink has to look like this

[routerLink]="['/home', { outlets: { popup: ['form'] } }]"

score 0 · Answer 2 · answered Jan 11 '17 at 09:23

0

You should not and can not include the outlet: parameter on the lazy load path. the lazy loaded routes are hidden away from the eagerly loaded application by design.

Instead you should build a module for outlets components and it should have its own routing configuration. In that router configuration you can set up a route to your Auxiliary outlets.

answered Jan 11 '17 at 09:23

Nate May

3,814
7
33
86

im a bit confused as to what or how its to be to done, correct me if im wrong, Il create another module which will contain the routes required to be loaded in auxiliary route except the wont be lazy loaded something like aux.seperate.module `@NgModule({ imports : [ CommonsModule,FormsModule,HttpModule, RouterModule.forChild([{ path: 'sample-one', component: SampleOneComponent , outlet : 'aux' }]) ], declarations : [ TestUIComponent ], providers : [ TestUIService,SharedDataService ] })` ?? export class TestUIModule { } – Pratik Kelwalkar Jan 11 '17 at 09:29
you are correct. I was confused. I found a workaround here: https://github.com/angular/angular/issues/12842 but I haven't played with it yet – Nate May Jan 11 '17 at 09:30
looks like they stuff the lazy load in a child route with a default path `''` – Nate May Jan 11 '17 at 09:31
yes but im not looking for a workaround, anyways thanks :) i guess il wait – Pratik Kelwalkar Jan 11 '17 at 09:34

Lazy loading auxiliary routes

2 Answers2