Angular 2 : routing without changing URL

Question

How can i route in an Angular 2 app without changing the URL? (this is because the app is located under one of several tabs on a page of a Django app, where it's suitable to leave the URL unchanged.)

currently i have something like this inside app.component.ts

@RouteConfig([   {     path: '/home',     name: 'Home',     component: HomeComponent,     useAsDefault: true   },   {     path: '/user/:id',     name: 'UserDetail',     component: UserDetailComponent   } ]) 

and inside say HomeComponent, navigation to a user page uses the following

this._router.navigate(['UserDetail', {id: id}]); 

then the url will look like http://localhost:8000/django_url/user/123

is it possible to have the url unchanged when i navigate within the Angular 2 app? so the url will stay http://localhost:8000/django_url when a user is on page user/123 ?

Thanks!

Answer 1

Update

router.navigateByUrl("/team/33/user/11", { skipLocationChange: true }); 

<a [routerLink]="..." skipLocationChange>click me</a> 

Update

There is a PR to support this directly https://github.com/angular/angular/pull/9608

Related issues

• https://github.com/angular/angular/issues/9579
• https://github.com/angular/angular/issues/9949

Original

You can implement a custom PlatformLocation similar to BrowserPlatformLocation but instead of calling ot history.pushState(), history.replaceState(), history.back(), and history.forward() maintain the changes in a local array.

You can then make Angular use your custom implementation by providing it like

bootstrap(AppComponent,      [provide(PlatformLocation, {useClass: MyPlatformLocation})]); 

Answer 2

Finally its working in Angular2 final release. You need to pass { skipLocationChange: true } while navigating to the path i.e.

 this.router.navigateByUrl('path', { skipLocationChange: true });