Router navigation with lazy loading modules

Question

we have a few lazy-loading modules and router's configured like:

{
    path: 'parent',
    component: Parent,
    children: [
        {
            path: child1,
            loadChildren: 'pathToModule1'
        }
        {
            path: child2,
            loadChildren: 'pathToModule1'
        }
    ]
}

- child1 
{
    path: '', 
    component: Child1 
}

- child2 
{
    path: '', 
    component: Child2 
}

So, when i'm on the Child1 a wanna navigate to child 2 with

this.router.navigate(['../child2'], {relativeTo: this.activatedRoute})

And we get parent/child1/child2

But in cause of empty section added with lazy loading module configuration i should use

this.router.navigate(['../../child2'], {relativeTo: this.activatedRoute})

Because in fact we have parent/child1 + ''

Expected behavior

We get parent/child2 Is there any way to change this behaviour ? Becouse with many nested lazy loading modules we'll get a littlebit empty sections and we'll write ../../../../../../sibling to go sibling route.

Minimal reproduction of the problem with instructions

any application with lazy loading modules. Just try navigate to sibling route.

plunker example just go down to members and try go back with two buttons

Angular version: 4.1.3

Browser: any

Seems to be an issue with the current version: github.com/angular/angular/issues/17957 — sidewaiise
– sidewaiise, Commented Mar 9, 2018 at 2:32

andbjer · Accepted Answer · 2019-10-02 21:16:34Z

1

The solution is to configure the Router with relativeLinkResolution set to 'corrected'.

@NgModule({
  imports: [
    RouterModule.forRoot(ROUTES, { relativeLinkResolution: 'corrected' })
  ]
})
class AppModule {}

See more: relativeLinkResolution

Enables a bug fix that corrects relative link resolution in components with empty paths

answered Oct 2, 2019 at 21:16

andbjer

5542 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Router navigation with lazy loading modules

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related