How can I navigate to lazy loaded module child routes?

Question

I am trying to lazy load module with child routes declared in it's routing configuration file, The lazy module loaded successfully but I can't navigate to it's child routes.

I am using the technique as if it were a eagerly loaded module. I declared path and inside it it's children. Please see 'moduleB' routing file in the Plunker The link button is trying to navigate to the child route and load CmpC. but it fails.

Here is my root module routing decalration:

{ path: 'feature-b', loadChildren:'src/featureB/featureB.module#FeatureBModule' ,  pathMatch: 'full'}

Here is my lazy loaded module routing declaration.

export const moduleBRoutes: Routes = [

  { path: '', component:CmpC , pathMatch: 'full',children:[
      {path: '' , pathMatch: 'full'},
      { path: 'c', component:CmpB , pathMatch: 'full'}
  ]},

];

export const subRouting: ModuleWithProviders = RouterModule.forChild(moduleBRoutes);

trying to navigate to : localhost:999/feature-b succeeded

trying to navigate to : localhost:999/feature-b/c failed

https://plnkr.co/edit/wFlJoDXRmAlMOswmwWFk?p=preview

Answer 1

Working DEMO : https://plnkr.co/edit/xAGjXqpmkLbCokvCt9qQ?p=info

Removed unnecessary usage of

pathMatch:'full'

Don't use it everywhere without any reason.

And its now working as expected.

learn more about pathMatch here https://angular.io/docs/ts/latest/guide/router.html#!#redirect, https://angular.io/docs/ts/latest/api/router/index/Routes-type-alias.html

Answer 2

I had the same issue, in my case no error appear but the view doesnt load, I can solved the problem by this way:

• This is my lazy module

const routes: Routes = [
  {
    path: ''
    },
    children: [
      { path: '', component: AdminComponent },
      { path: 'users', component: AdminUsersComponent },
      { path: 'games', component: AdminGamesComponent },
      { path: '**', redirectTo: '' }
    ]
  }
];

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

• This is my root module

const routes: Routes = [
  {
    path: 'admin', loadChildren: 'app/admin/admin.module#AdminModule'
  }
];

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

Now the routes:

• admin/
• admin/users
• admin/games

works perfectly