Erreur avec Angular Material sidenav : cannot read property of undefined

Question

Je travaille sur une application client Angular et j'ai déjà utilisé quelques fonctionnalités de Material dans cette application, comme le dialogue, la sélection, la carte, etc. Je pense que j'ai déjà installé tout ce dont j'ai besoin. Maintenant j'ai fait un sidenav et je veux utiliser le module sidenav de Material, donc je l'ai fait comme ceci :

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

Maintenant, lorsque je navigue vers ce composant, je reçois une erreur :

Non trouvé (dans promise):TypeError : Cannot read property 'runOutsideAngular' of undefined

Sans le composant, il fonctionne parfaitement bien... Quelqu'un sait-il quel pourrait être le problème ? Merci !

Answer 1

J'ai fait presque le même code mais j'ai changé les éléments suivants :

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

Answer 2

J'ai rencontré la même erreur en exécutant ng test sur Schéma de navigation d'Angular Material :

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

J'ai résolu le problème en changeant mat-sidenav a mat-drawer en el mat-navbar-test.component.html .

Answer 3

J'ai fait le sidenav comme ça et il fonctionne correctement, essayez ceci.

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

Answer 4

Avant

<mat-sidenav-container *ngIf="currentAdmin && currentAdmin.role" id="nav" >

J'ai rencontré ce problème et l'ai résolu en supprimant *ngIf sur le parent, 'mat-sidenav-container'.

<mat-sidenav-container id="nav" >