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 t

Answer 1

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

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

Answer 3

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