Repository: angular
Issue: Async Router Guard Navigation Issue
Labels: type: bug/fix,freq4: critical,area: router,state: confirmed,router: guards/resolvers,P3

**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**
When the URL is changed manually to a parent route that redirects to a child route and that child route navigates to different route with an async guard, the last child route does not always load.

**Expected behavior**
The last child route should load as expected.

**Minimal reproduction of the problem with instructions**
Plunker: http://plnkr.co/edit/PNubvwfYsOTkwPJHrsPb?p=preview
If you remove the guard, everything works as expected.

**Steps to reproduce**
1. Open the plunker
2. Open the execution window in it's own window
3. Copy the URL without the hash (ex. http://run.plnkr.co/mOTJamm7zWdPs0N2/)
4. Paste the URL in a new tab of your browser. This is necessary so you have access to change the hash.
5. Let the page load normally once. You will be directed to `#/test => #/test/testStart => #/test/123`
6. Delete the ID portion of the URL leaving `#/test`. Press enter.
7. You should see in the console the router guard resolves but the route never changes.

** Additional Info**
These are some screenshots from an actual application. I added some debug code to the router. I hope this helps. The first image is a result of me manually modifying the hash in the URL to a parent route. The second is the first child route navigating to a second child route which contains an async guard. Not sure what the third one is or where it came from. There are no additional calls to navigate or navigateByUrl.

<img width="744" alt="screen shot 2017-04-17 at 12 53 44" src="https://cloud.githubusercontent.com/assets/3984979/25101618/9289671e-237a-11e7-9f6f-1119a78f5883.png">
<img width="749" alt="screen shot 2017-04-17 at 12 53 58" src="https://cloud.githubusercontent.com/assets/3984979/25101623/94939bf6-237a-11e7-9219-5872792b0d70.png">
<img width="745" alt="screen shot 2017-04-17 at 12 54 06" src="https://cloud.githubusercontent.com/assets/3984979/25101629/981c50d8-237a-11e7-9ff7-ffc61625d5a8.png">

My routes configuration (this is a subset of the entire app):
```
export const CHANGE_SERVICES_PLANS_ROUTES: Routes = [
  {
    path: 'change-services',
    children: [
      {
        path: '',
        redirectTo: 'select-device',
        pathMatch: 'full'
      },
      {
        path: 'select-device',
        component: ChangeServicesSelectDeviceComponent,
        canActivate: [
          KMSISessionGuard
        ]
      },
      {
        path: 'error',
        component: ChangeServicesPlansErrorPageComponent
      },
      {
        path: ':subscriptionId',
        component: MakeChangesComponent,
        canActivate: [
          KMSISessionGuard,
          ChangeServicesPlansGuard
        ]
      },
      {
        path: ':subscriptionId/review-changes',
        component: ReviewChangesComponent,
        canActivate: [
          KMSISessionGuard,
          ChangeServicesPlansGuard
        ]
      }
    ]
  },
  {
    path: 'change-plans',
    children: [
      {
        path: '',
        redirectTo: 'select-plan',
        pathMatch: 'full'
      },
      {
        path: 'select-plan',
        component: ChangePlansComponent
      }
    ]
  }
];
```

**Please tell us about your environment:**
Mac OS X 10.11.6
Webstorm 2017.1

* **Angular version:**
4.0.2

* **Browser:**
Chrome 57.0.2987.133
 
* **Language:**
Typescript 2.2.2

* **Node (for AoT issues):**
6.9.2