Router navigation triggered twice after manual change in browser URL

[etiennecrb]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

Consider two routes with a master / detail pattern like /crisis-center and /crisis-center/:id.

const crisisCenterRoutes: Routes = [
  {
    path: '',
    component: CrisisCenterComponent,
    children: [
      {
        path: '',
        component: CrisisListComponent,
        children: [
          {
            path: ':id',
            component: CrisisDetailComponent,
            canDeactivate: [CanDeactivateGuard],
            resolve: {
              crisis: CrisisDetailResolver
            }
          },
          {
            path: '',
            component: CrisisCenterHomeComponent
          }
        ]
      }
    ]
  }
];

You might want to redirect the master path to a particular id. This can be done in CrisisCenterHomeComponent, like so:

@Component({
  template: `
    <p>Welcome to the Crisis Center</p>
  `
})
export class CrisisCenterHomeComponent {
  constructor(private route: ActivatedRoute, private router: Router) {
    this.router.navigate([1], {relativeTo: this.route});
  }
}

Or with a CanActivate guard:

@Injectable()
export class RedirectionGuard implements CanActivate {
  
  constructor(private router: Router) { }
  
  canActivate() {
    this.router.navigate(['/crisis-center', 1]);
    return false;
  }
}

Both solution work but when changing the URL manually in the browser URL bar, router triggers two navigation events:

Expected behavior

Router should trigger only one navigation event, as it does when navigating programmatically (meaning not changing manually the URL).

Minimal reproduction of the problem with instructions

Demo with component redirection
Demo with guard redirection

Steps to reproduce:

• Open one of the plunker above
• Launch preview in a separated window to be able to change manually the URL
• Click on item 2 of crisis list
• Open console and clear its ouput
• Change URL directly in the browser bar to go '/crisis-center/'
• Check the console output and the multiple "Navigation start" event to '/crisis-center/' even after first redirection
• Repeat the test but instead of changing the URL, click on "Go To Crisis Center Home" link above the list to see that it's working when navigating programmatically

What is the motivation / use case for changing the behavior?

I described a very simple example of the bug but I have currently a use case where this behaviour is very difficult to deal with, for a quite simple feature.

Environment

Angular version: 4.3.1


Browser:
- [x] Chrome (desktop) version 60
 
For Tooling issues:
- Node version: v6.11.1  
- Platform:  Linux

[IAMtheIAM]

No activity or solution in months? This bug still exists @alxhub

Duplicate issue at #16710

[silentHoo]

No progress here? Having the same problem.

[jasonaden]

Closing this as a duplicate of #16710. Prioritizing that issue so it can be looked into ASAP.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}