Navigate to a lazy component which is a part of lazily loaded submodule in a named secondary/aux outlet

Question

There are two modules app and lazy modules. Need do display a lazy component in a named secondary outlet. The 'lazy component' is part of the submodule 'lazy'.

Navigation:

 this.router.navigate([{outlets:{primary:'lazy', Secondary:'lazyComponent'}}]);

Correct navigation in answer below

App Module:

const routes: Routes = [
    {
      path: 'lazy',
      loadChildren: './lazy.module#LazyModule'
    }
  ]

  @NgModule({
    declarations: [],
    imports: [
      RouterModule.forRoot(routes)
    ],
    bootstrap: [AppComponent]
  })
  export class AppModule { }

Lazy Module:

const routes: Routes = [
        {
          path: 'lazyComponent',
          component: 'lazyComponent'
        }
  ]

  @NgModule({
    declarations: [lazyComponent],
    imports: [
      RouterModule.forChild(routes)
    ]
  })
  export class LazyModule{ }

This doesn't work and the error is -> Error: Cannot match any routes. URL Segment: 'lazyComponent'

Rk R Bairi · Accepted Answer · 2019-09-09T17:09:40.263

1

The following router navigation worked.

  this.router.navigate(['/', 'lazy', {outlet:{secondary:'lazyComponent'}}])

First navigate to app module path and then to secondary outlet of lazy module.

edited Sep 09 '19 at 17:09

answered Sep 09 '19 at 16:05

Rk R Bairi

1,289
7
15
39

score 0 · Answer 2 · edited Sep 15 '19 at 09:02

0

you can directly call the path like this

this.router.navigate(['/lazy/lazyComponent'])

edited Sep 15 '19 at 09:02

MaartenDev

5,631
5
21
33

answered Sep 15 '19 at 08:36

rajhim

259
2
14

Navigate to a lazy component which is a part of lazily loaded submodule in a named secondary/aux outlet

2 Answers2