angular6: компонент материала nav создает ошибки сборки. «Свойство isHandset $ не существует для типа« AppComponent »».

Question

Я пытаюсь сделать универсальный рендеринг в своем приложении angular6. Для этого я пытаюсь создать сборку моего приложения с помощью команды 'npm run build: ssr', но она показывает следующую ошибку.

ERROR in src\app\app.component.html(7,5): : Property 'isHandset$' does not exist on type 'AppComponent'.
src\app\app.component.html(8,5): : Property 'isHandset$' does not exist on type 'AppComponent'.
src\app\app.component.html(6,5): : Property 'isHandset$' does not exist on type 'AppComponent'.
src\app\app.component.html(23,9): : Property 'isHandset$' does not exist on type 'AppComponent'.

app.component.html

<mat-sidenav-container class="sidenav-container">
  <mat-sidenav
    #drawer
    class="sidenav"
    fixedInViewport="true"
    [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
    [mode]="(isHandset$ | async) ? 'over' : 'side'"
    [opened]="!(isHandset$ | async)">
    <mat-toolbar color="primary">Menu</mat-toolbar>
    <mat-nav-list>
      <a mat-list-item [routerLink]="['/home']">Home</a>
      <a mat-list-item [routerLink]="['/about',{outlets:{fchild:['firstChild'],schild:['']}}]">ABOUT</a>
      <a mat-list-item href="#">Link 3</a>
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <mat-toolbar color="primary">
      <button
        type="button"
        aria-label="Toggle sidenav"
        mat-icon-button
        (click)="drawer.toggle()"
        *ngIf="isHandset$ | async">
        <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
      </button>
      <span>Application Title</span>
    </mat-toolbar>

<router-outlet></router-outlet>
  </mat-sidenav-content>
</mat-sidenav-container>

app.component.ts

import { Component } from '@angular/core';
import { BreakpointObserver, Breakpoints, BreakpointState } from '@angular/cdk/layout';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset)
    .pipe(
      map(result => result.matches)
    );

  constructor(private breakpointObserver: BreakpointObserver) {}

  }

В приведенном выше коде я использую дизайн материалав моем угловом приложении и свойство 'isHandset $' является частью материала design.can кто-нибудь, пожалуйста, помогите мне решить эту проблему.

Answer 1

Вы импортировали MatSidenavModule в свой app.module.ts?