Search code examples
angularangular-ui-routerlazy-loadingrouter-outlet

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


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'


Solution

  • 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.