fix(router): canDeactivate should not change the url when returns false and skipLocationChange has been set to true

I’m submitting a … (check one with “x”)

[X] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior This is leftover from : https://github.com/angular/angular/issues/10321

With the following routes:

path: 'view',
children: [
    {

        path: ':id',
        component: CustomerViewComponent,
        resolve: {
            customerViewData: CustomerResolve,
        },
        canDeactivate: [CanDeactivateGuard],
        children: [
            {
                path: 'edit',
            },
            {
                path: ''
            }
        ]
    }
]

If you navigate to a route like this using skipLocationChange:

this.router.navigate(['edit'], { relativeTo: this.route, skipLocationChange: true });

Then when you are about to navigate away and return false in canDeactivate(), the /edit creeps in the URL.

Expected behavior The URL should not change to /edit

Minimal reproduction of the problem with instructions

http://plnkr.co/edit/K1JnuZfQ5S0WHnWmp6Zv?p=preview

Steps:

• pop out the preview window to see the address bar
• click on a crisis center
• click on “Dragon burning cities”
• The URL stays /crisis-center because of skipLocationChange
• and edit the text
• use the browser back commands to go back.

ACTUAL:
The URL goes to /crisis-center/1

EXPECTED:
The URL should stay to /crisis-center

What is the motivation / use case for changing the behavior? This causes further problem when using relative routing such as …/…

Please tell us about your environment: Visual Studio 2015, IIS Express, npm@3.10.5

• Angular version: 2.2.0-rc0 “@angular/common”: “^2.2.0-rc.0”, “@angular/compiler”: “^2.2.0-rc.0”, “@angular/compiler-cli”: “^2.2.0-rc.0”, “@angular/core”: “^2.2.0-rc.0”, “@angular/forms”: “^2.2.0-rc.0”, “@angular/http”: “^2.2.0-rc.0”, “@angular/platform-browser”: “2.2.0-rc.0”, “@angular/platform-browser-dynamic”: “^2.2.0-rc.0”, “@angular/router”: “^3.2.0-rc.0”, “@angular/upgrade”: “^2.2.0-rc.0”,

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ] Tried in Chrome

• Language: TypeScript 2.0.6

• Node (for AoT issues): node --version =

[vanrado]

As I see, still not fixed in 4.2.4 😦

[rsirs]

came across similar problem, a simple working around I have used

canActivate(route, state) {
  /* problem is with history */
   if(activate == false) 
      this.platformLocation.pushState('state', 'msg', previousVisitedRoute);
   return activate;
}