CODEWITHSUNDEEP
angularangular2-routinglazy-loading
CrisColamb
CrisColamb

Reputation: 21

Router navigation with lazy loading modules

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

Upvotes: 2

Views: 3982

Answers (1)

andbjer
andbjer

Reputation: 554

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

Upvotes: 1

Related Questions