Невозможно связать с 'mode', так как это не известное свойство 'mat-sidenav'

Question

Привет, я не знаю, что делать с этим

Вот ошибка

compiler.js:2430 Uncaught Error: Template parse errors:
Can't bind to 'mode' since it isn't a known property of 'mat-sidenav'.
1. If 'mat-sidenav' is an Angular component and it has 'mode' input, then verify that it is part of this module.
2. If 'mat-sidenav' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("="sidenav" fixedInViewport
      [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
      [ERROR ->][mode]="(isHandset$ | async) ? 'over' : 'side'"
      [opened]="(isHandset$ | async) === false">
    "): ng:///ComponentsModule/SidenavComponent.html@3:6
Can't bind to 'opened' since it isn't a known property of 'mat-sidenav'.
1. If 'mat-sidenav' is an Angular component and it has 'opened' input, then verify that it is part of this module.
2. If 'mat-sidenav' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("et$ | async) ? 'dialog' : 'navigation'"
      [mode]="(isHandset$ | async) ? 'over' : 'side'"
      [ERROR ->][opened]="(isHandset$ | async) === false">
    <mat-toolbar>Menu</mat-toolbar>
    <mat-nav-list>
"): ng:///ComponentsModule/SidenavComponent.html@4:6
'mat-toolbar' is not a known element:
1. If 'mat-toolbar' is an Angular component, then verify that it is part of this module.
2. If 'mat-toolbar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("mode]="(isHandset$ | async) ? 'over' : 'side'"
      [opened]="(isHandset$ | async) === false">
    [ERROR ->]<mat-toolbar>Menu</mat-toolbar>
    <mat-nav-list>
      <a mat-list-item href="#">Link 1</a>
"): ng:///ComponentsModule/SidenavComponent.html@5:4
'mat-nav-list' is not a known element:
1. If 'mat-nav-list' is an Angular component, then verify that it is part of this module.
2. If 'mat-nav-list' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
      [opened]="(isHandset$ | async) === false">
    <mat-toolbar>Menu</mat-toolbar>
    [ERROR ->]<mat-nav-list>
      <a mat-list-item href="#">Link 1</a>
      <a mat-list-item href="#">Link 2</a>
"): ng:///ComponentsModule/SidenavComponent.html@6:4
'mat-sidenav' is not a known element:
1. If 'mat-sidenav' is an Angular component, then verify that it is part of this module.
2. If 'mat-sidenav' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("<mat-sidenav-container class="sidenav-container">
  [ERROR ->]<mat-sidenav #drawer class="sidenav" fixedInViewport
      [attr.role]="(isHandset$ | async) ? 'dialo"): ng:///ComponentsModule/SidenavComponent.html@1:2
'mat-icon' is not a known element:
1. If 'mat-icon' is an Angular component, then verify that it is part of this module.
2. If 'mat-icon' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
        (click)="drawer.toggle()"
        *ngIf="isHandset$ | async">
        [ERROR ->]<mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
      </button>
      <span>tester</span>"): ng:///ComponentsModule/SidenavComponent.html@20:8
'mat-toolbar' is not a known element:
1. If 'mat-toolbar' is an Angular component, then verify that it is part of this module.
2. If 'mat-toolbar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
  </mat-sidenav>
  <mat-sidenav-content>
    [ERROR ->]<mat-toolbar color="primary">
      <button
        type="button"
"): ng:///ComponentsModule/SidenavComponent.html@13:4
'mat-sidenav-content' is not a known element:
1. If 'mat-sidenav-content' is an Angular component, then verify that it is part of this module.
2. If 'mat-sidenav-content' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
    </mat-nav-list>
  </mat-sidenav>
  [ERROR ->]<mat-sidenav-content>
    <mat-toolbar color="primary">
      <button
"): ng:///ComponentsModule/SidenavComponent.html@12:2
'mat-sidenav-container' is not a known element:
1. If 'mat-sidenav-container' is an Angular component, then verify that it is part of this module.
2. If 'mat-sidenav-container' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]<mat-sidenav-container class="sidenav-container">
  <mat-sidenav #drawer class="sidenav" fixedInViewp"): ng:///ComponentsModule/SidenavComponent.html@0:0
    at syntaxError (compiler.js:2430)
    at TemplateParser.push../node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse (compiler.js:20605)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate (compiler.js:26171)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate (compiler.js:26158)
    at compiler.js:26101
    at Set.forEach (<anonymous>)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (compiler.js:26101)
    at compiler.js:26011
    at Object.then (compiler.js:2421)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:26010)

Моя структура такая

1. Sidenav генерируется @angular/material:material-nav --name=sidenav

2. импорт перемещен из app.module.ts в app.material.module.ts где MatToolbarModule, MatButtonModule, MatSidenavModule, MatIconModule, MatListModule включены.

3. AdminLayoutComponent и AuthLayoutComponent являются единственными компонентами здесь

4. модуль материала

import { NgModule } from '@angular/core';
import { MatToolbarModule, MatButtonModule, MatSidenavModule, MatIconModule, MatListModule } from '@angular/material';


@NgModule({
  imports: [
    MatToolbarModule,
    MatButtonModule,
    MatSidenavModule,
    MatIconModule,
    MatListModule
  ],
  exports: [
    MatToolbarModule,
    MatButtonModule,
    MatSidenavModule,
    MatIconModule,
    MatListModule
  ]
})
export class MaterialModule { }

Answer 1

Ошибка свидетельствует о том, что вам не удалось правильно импортировать MatSidenavModule в модуль, где вы пытаетесь его использовать. Ошибка указывает на то, что сбой происходит в ComponentsModule, поэтому импорт отсутствует. Вам необходимо импортировать MaterialModule или MatSidenavModule в ComponentsModule.