Hi I don't know what to do with this

Here's the error

piler.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 ponent 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 ponent to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this ponent. ("="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 ponent 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 ponent to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this ponent. ("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 ponent, 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 ponent 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 ponent, 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 ponent 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 ponent, 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 ponent 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 ponent, 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 ponent 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 ponent, 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 ponent 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 ponent, 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 ponent 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 ponent, 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 ponent 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 (piler.js:2430)
    at TemplateParser.push../node_modules/@angular/piler/fesm5/piler.js.TemplateParser.parse (piler.js:20605)
    at JitCompiler.push../node_modules/@angular/piler/fesm5/piler.js.JitCompiler._parseTemplate (piler.js:26171)
    at JitCompiler.push../node_modules/@angular/piler/fesm5/piler.js.JitCompiler._pileTemplate (piler.js:26158)
    at piler.js:26101
    at Set.forEach (<anonymous>)
    at JitCompiler.push../node_modules/@angular/piler/fesm5/piler.js.JitCompiler._pileComponents (piler.js:26101)
    at piler.js:26011
    at Object.then (piler.js:2421)
    at JitCompiler.push../node_modules/@angular/piler/fesm5/piler.js.JitCompiler._pileModuleAndComponents (piler.js:26010)

My structure is like this

1. Sidenav is generated by @angular/material:material-nav --name=sidenav

2. imports are moved from app.module.ts to app.material.module.ts where MatToolbarModule, MatButtonModule, MatSidenavModule, MatIconModule, MatListModule are included.

3. AdminLayoutComponent and AuthLayoutComponent are the only ponents here

4. material module is

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 { }

Hi I don't know what to do with this

Here's the error

piler.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 ponent 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 ponent to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this ponent. ("="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 ponent 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 ponent to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this ponent. ("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 ponent, 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 ponent 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 ponent, 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 ponent 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 ponent, 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 ponent 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 ponent, 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 ponent 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 ponent, 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 ponent 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 ponent, 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 ponent 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 ponent, 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 ponent 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 (piler.js:2430)
    at TemplateParser.push../node_modules/@angular/piler/fesm5/piler.js.TemplateParser.parse (piler.js:20605)
    at JitCompiler.push../node_modules/@angular/piler/fesm5/piler.js.JitCompiler._parseTemplate (piler.js:26171)
    at JitCompiler.push../node_modules/@angular/piler/fesm5/piler.js.JitCompiler._pileTemplate (piler.js:26158)
    at piler.js:26101
    at Set.forEach (<anonymous>)
    at JitCompiler.push../node_modules/@angular/piler/fesm5/piler.js.JitCompiler._pileComponents (piler.js:26101)
    at piler.js:26011
    at Object.then (piler.js:2421)
    at JitCompiler.push../node_modules/@angular/piler/fesm5/piler.js.JitCompiler._pileModuleAndComponents (piler.js:26010)

My structure is like this

1. Sidenav is generated by @angular/material:material-nav --name=sidenav

2. imports are moved from app.module.ts to app.material.module.ts where MatToolbarModule, MatButtonModule, MatSidenavModule, MatIconModule, MatListModule are included.

3. AdminLayoutComponent and AuthLayoutComponent are the only ponents here

4. material module is

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 { }

• javascript
• angular
• angular-material
• navbar
• sidenav

• have you imported your MaterialModule in AppModule? – porgo Commented Jun 28, 2019 at 7:54
• yes it is imported – Mark Commented Jun 28, 2019 at 7:55
• 2 Please provide a minimal reproducible example of your issue. – user4676340 Commented Jun 28, 2019 at 8:09

2 Answers 2

I have just had a similar problem. I had all the modules set up properly but the HTML just couldn't find the materials sidenav.

In the end it turned out that I had accidently removed AppComponent from the declarations part of app.module.ts:

@NgModule({
    imports: [
        MatSidenavModule,
      ],
    declarations: [
        AppComponent
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

I wasn't 'using it'; I was only using the HTML part of the ponent ... so I must have deleted the declaration to be tidy. Turns out that the module uses this declaration to know who gets it's imported information and that the HTML is as much a part of the ponent as the javascript and css parts.

Hopefully this will help someone else; I suspect the original poster is long gone.

The error is evidence that you have failed to import MatSidenavModule properly in the module where you are attempting to use it. The error indicates that the failure occurs in ComponentsModule so that is where the import is missing. You need to import MaterialModule or MatSidenavModule into ComponentsModule.