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!

Hi, I am facing the same problem. Did you found a solution for your problem? I am using Angular2 RC4 — Kosmonaft, Aug 05 '16 at 00:26
Is this a best practice, an anti-pattern, or something in between? What do the angular devs have to say on this? — chrisinmtown, Aug 13 '19 at 13:29

Günter Zöchbauer · Answer 1 · 2016-12-05T20:16:38.730

98

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

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

edited Dec 05 '16 at 20:16

answered May 05 '16 at 16:10

Günter Zöchbauer

623,577
216
2,003
1,567

currently i don't call `history.pushState()`, `history.replaceState()` or others. can you point me to some resource regarding `pushState` and `PlatformLocation`? thanks! – totoro May 05 '16 at 17:19
You don't but the router does through `PlatformLocation`. This is what updates the URL. If you provide a custom implementation for `PlatformLocation` you can prevent this. I haven't thought a lot about this yet. Maybe you can just provide an implementation that does nothing and there is no need to maintain any state. Most of this is just to make the back/forward buttons work. If you don't reflect the navigation in the URL this might not make sense anyway. – Günter Zöchbauer May 05 '16 at 17:45
could you give an example (or point me to some resources) of how to implement this custom `PlatformLocation` and where to place it? thanks again! – totoro May 05 '16 at 18:19
Sorry, I forgot to add the URL. I updated my answer. When you have your custom implementation you provide it by `bootstrap(AppComponent, [provide(PlatformLocation, {useClass: MyPlatformLocation})])` – Günter Zöchbauer May 05 '16 at 18:47

score 20 · Answer 2 · answered Sep 20 '16 at 10:23

20

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

answered Sep 20 '16 at 10:23

shan kulkarni

849
7
18

10

How to do the { skipLocationChange: true } from anchor tag? – Aniruddha Das Sep 21 '16 at 20:44
5

Is there anyway to do this globally so every single call to `navigate` doesn't need these parameters passed in? – Adam Hughes Nov 09 '17 at 22:38
works for me! I'm using this for a not found page and rather than using 'history.go(-2);' I prefer not changing the wrong url. Thanks! – Helen Apr 18 '18 at 04:26

score 4 · Answer 3 · edited Jan 18 '18 at 08:29

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

Angular 2 : routing without changing URL

3 Answers3

Linked

Related