Router not reusing parent component when changing only the child route #18374

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

The use case is basic:

• I have an application shell (header, menu...) used as the base for all screens once the user is logged in
• Following Angular style guide, Home and About screens each use a dedicated module, each with their own routes declaration
• The /home and /about routes are child routes of the shell component

When navigating from home to about, I expected the shell component to be reused, but it's not the case:

The shell component is destroyed and reinstanciated when navigating between the child routes.

Expected behavior

Since the parent component does not change (the shell) when navigating between child routes, I expect it to be reused by the router.

Minimal reproduction of the problem with instructions

See this repo, based on angular-cli: https://github.com/ngx-rocket/starter-kit

• npm start
• log in with any user/pass
• navigate between home and about screens

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

Since the parent component is the same, its state should be persisted between child route change or behavior will be inconsistent.

Environment

Angular version: 4.3.1


Browser:
- [X] Chrome (desktop) version 59