Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

angular2 router dose not work when “loadChildren” loading modules

See original GitHub issue

I have a router definition like this:

const routes: Routes = [
{
    "path": "member",
    "loadChildren": "app/member/member.module#MemberModule"
},
{
    "path": "",
    "loadChildren": "app/video/video.module#VideoModule"
},
{
    "path": "**",
    "redirectTo": ""
}
]

MemberRouter definition like this:

const routes: Routes = [
{
    "path": "order",
    "component": MemberComponent,
    "loadChildren": "app/member/order/order.module#OrderModule"
},
{
    "path": "",
    "component": MemberComponent,
    "loadChildren": "app/member/index/index.module#IndexModule"
}
]

OrderRouter definition like this:

const routes: Routes = [
{
    "path": "list",
    "outlet": "member",
    "component": OrderComponent,
    "loadChildren": "app/member/order/list/list.module#ListModule"
},
{
    "path": "",
    "outlet": "member",
    "component": OrderComponent
}
]`

ListRouter definition like this:
`const routes: Routes = [
{
    "path": "",
    "outlet": "order",
    "component": ListComponent
}
]

It dose not work at “/member/order/list”

It is working at “/member/order”

“OrderRouter” rules can not be matched when “MemberRouter” is lazy loaded

“loadChildren” dose not work when nested

Please help me solve, thank you!

Plunker Demo Click “product/detail/item” button dose no work.

Issue Analytics

State:
Created 6 years ago
Reactions:4
Comments:19 (3 by maintainers)

Top GitHub Comments

4reactions

JagsAKcommented, Jan 7, 2018

I’ve fixed the issue…you just add ‘:’ before the ‘" in path value like ':’… example like { path: ‘😗*’, loadChildren: ‘app/components/pagenotfound/pagenotfound.module#PagenotfoundComponentModule’, “pathMatch”: “full” }

1reaction

phatnguyenbgcommented, Jun 27, 2018

For me, I also get same error and I’ve fixed it 😃 issues only add ./ before which modules want to link at root module app! I hope solved your problem 👍

Top Results From Across the Web

Angular 12 Routing doesn't work when lazy loading modules

app-routing const routes: Routes = [ { path: 'login', loadChildren: () => import('./login/login.module').then((c) => c.

Lazy-loading feature modules - Angular

To lazy load Angular modules, use loadChildren (instead of component ) in your AppRoutingModule routes configuration as follows. AppRoutingModule (excerpt)

Manually Lazy Load Modules And Components In Angular

A lazy-loaded module can be defined in the routing configuration using the new import(...) syntax for loadChildren : @NgModule({ imports: [ RouterModule.

How To Use Lazy Loading Routes in Angular | DigitalOcean

Step 1 – Setting Up the Project · Step 2 – Using loadChildren · Step 3 – Setting Route Configuration in the Feature...

Lazy Loading a Module - Rangle.io : Angular Training

With lazy loading our application does not need to load everything at once, it only needs to ... We use the property loadChildren...