Mat-progress-bar does is not displayed with Router

[yeputons]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

If there are multiple components, each with its own Route, each having <mat-progress-bar mode="buffer">, then I can switch between these components by clicking <a routerLink="..."> and their progress bars are correctly and independently rendered.

What is the current behavior?

Only the first component loaded by Router has its progress bar visible. If I click to other components, their progress bars take space on the page, but are invisible (SVG is not loaded). If I click back, the first progress bar is visible. If I click to another component and then refresh page, the progress bar becomes visible on that another component and invisible on the first one.

What are the steps to reproduce?

StackBlitz starter: https://stackblitz.com/edit/angular-material2-issue-kgyhyg?file=app/other.component.ts

1. Observe nothing between Router start and Router end; there is no current component.
2. Click on the Other link. Other: text appears between Router start and Router end, as well as a progress bar.
3. Click on the Another link. Another: text appears between Router start and Router end, but there is no progress bar.
4. Click back on the Other link. Text changes, progress bar returns.
5. Manually change the URL from /other to /another. Page reloads and now the text says Another and there is a progress bar.
6. Click on the Other link. Text changes, progress bar disappears.

You can also repeat steps 1-4 in the other order: click on Another first, observe its progress bar, and then Other's progress bar will be invisible.

What is the use-case or motivation for changing an existing behavior?

I have several pages in my application, each has its own independent loading indicator (or multiple for different parts of the page) because I want to provide users maximum information.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 6.4.7, Angular 7.0.0.
Firefox Quantum 62.0.3 (64-bit) on Windows.
Chrome 69.0.3497.100 (Official Build) (64-bit)

Is there anything else we should know?

There was a related issue #12710, but it was about mat-progress-bar not rendering when using useHash: true. It was fixed in Angular 7.0.0, so if you patch app.module.ts:131 like this, the problem disappears:

-    RouterModule.forRoot(routes)
+    RouterModule.forRoot(routes, {useHash: true})

[crisbeto]

This is fixed in 7.0.1 by #13628.

[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.}