fix(schematics): navigation schematic not respecting breakpoints on initial render (#16788)

a6cdcfc added the `share()` operator to the
`isHandset$` observable. This accidentally broke the initial rendering of the navigation as the view subscribes
to the observable (through `async` pipe) after the initial value has been emitted. Meaning that `isHandset$ | async`
expression always evaluates to `null` until the breakpoint changes.

(cherry picked from commit 3205b31)

Author: devversion

src/material/schematics/ng-generate/nav/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts.template

@@ -1,7 +1,7 @@
 import { Component<% if(!!viewEncapsulation) { %>, ViewEncapsulation<% }%><% if(changeDetection !== 'Default') { %>, ChangeDetectionStrategy<% }%> } from '@angular/core';
 import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
 import { Observable } from 'rxjs';
-import { map, share } from 'rxjs/operators';
+import { map, shareReplay } from 'rxjs/operators';
 
 @Component({
   selector: '<%= selector %>',<% if(inlineTemplate) { %>
@@ -21,7 +21,7 @@ export class <%= classify(name) %>Component {
   isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset)
     .pipe(
       map(result => result.matches),
-      share()
+      shareReplay()
     );
 
   constructor(private breakpointObserver: BreakpointObserver) {}