Error with Angular Material sidenav: cannot read property of undefined

Question

I'm working on an Angular client app and I've already used few of Material's features in this app like dialog, select, card etc. I think I've already installed everything I need. Now I made a sidenav and I want to use material's sidenav module, so I made it like this:

<mat-container>
  <mat-content>
    <div (click)="sidenav.toggle()"></div>
    my component html . . .
  </mat-content>
  <mat-sidenav #sidenav>
    <app-sidenav></app-sidenav>
  </mat-sidenav>
</mat-container>

Now when I'm navigating to this component I'm getting an error:

Uncaught (in promise):TypeError: Cannot read property 'runOutsideAngular' of undefined

Without the the component works perfectly fine... Does anybody know what might be the problem? Thanks!

Answer 1

I did it almost thesame code but changed these as followed:

• <mat-container> => <mat-drawer-container>
• <mat-content> => <mat-drawer-content>
• <mat-sidenav #sidenav> => <mat-drawer #drawer>

Answer 2

I encountered the same error when running ng test on Angular Material's Navigation Schematic:

ng generate @angular/material:material-nav --name <component-name>

I fixed the issue by changing mat-sidenav to mat-drawer in the mat-navbar-test.component.html.