Angular 2 : routing without changing URL

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!

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})]);

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 });

this.router.navigateByUrl('path', { skipLocationChange: true }); also worked for me.

In Routes array I also added my path to load a component as below:

const appRoutes: Routes = [    
   { path: 'Account/MySchool', component: MySchoolComponent }
];

And in the file from there i need to replace the component, initialize router object like below and call at required place

import { Router } from '@angular/router';

constructor(private router: Router) {    }


onSubmit() {        
    this._requestService.postPageOneData("Account/SavePageOneData", this.userProfile)
        .subscribe((response) => {
            if(response.status == 'success'){
                   this.router.navigateByUrl('Account/PageTwoSelection', { skipLocationChange: true });
              }
        }, this.handleErrorSubscribed );
    }