Angular 5 routing issue in a feature module (force router to reload route when path is same but param changes)

Question

I have a lazy loaded module ( documentation) and the routing file as below,

documentation-routing.module.ts

const routes: Routes = [
    {
        path: '',
        component: DocumentationComponent,
        children: [
            {
                path: '',
                pathMatch: 'full',
                redirectTo: 'getting-started'
            },
            {
                path: 'getting-started',
                component: GettingStartedComponent
            },
            {
                path: 'products/:productname/:productVersion',
                component: ProductDocumentComponent
            }
    ]
    }
];

I am calling a route from an another module like this,

this.router.navigate([`documentation/products/${this.productRouteName}/${productVersion.version}`]);

and it works fine and URL becomes,

http://localhost/documentation/products/myProductName/2.1.0

Now the problem I am facing, If I want to navigate to the same route ( by changing the version number) from within the component of documentation module , for example,

documentation.component.ts

 ProductDocumentationForAnotherVersion(e:any, version:string){
          this.router.navigate([`../products/${routeName}/${version}`]);
    }

the URL becomes

http://localhost/products/myProductName/3.1.0

which is invalid. as all URL should be based on

http://localhost/documentation/. , when I am calling ( for any child route) from within the documentation module

It looks something I am not doing right here. any suggestions?

Following is the stackBlitz, https://stackblitz.com/edit/angular-u7olmx

--------UPDATE----------

I ended-up calling like

documentation.component.ts

 ProductDocumentationForAnotherVersion(e:any, version:string){
          this.router.navigate([`documentation/products/${routeName}/${version}`]);
    }

and used the following way to reload the page when the route is same but the parameter value changes,

route.params.subscribe(param => {
            this.selectedVersion = param['clickedVersion'];
            if (this.selectedVersion) {
                this.getDocumentation(this.selectedVersion); 
            }
        });

Answer 1

If you are just changing version , You can use Relative path :

this.router.navigate([`../${version}`], {relativeTo: this.activatedRoute});

OR Absolute Path :

this.router.navigate([`documentation/products/${routeName}/${version}`]);

I would prefer the relative path for the same component route, and only use absolute when it is completely diff path.

---

onSameUrlNavigation: 'reload' | 'ignore'    

How to handle a navigation request to the current URL. One of:

'ignore' : The router ignores the request. 'reload' : The router reloads the URL. Use to implement a "refresh" feature.

RouterModule.forRoot(routes, {
    onSameUrlNavigation: 'reload'
})