mat-sidenav-content выбрасывает Нет поставщика для MatSidenavContainer

Question

app.component.html

<mat-side-nav-container>

    <mat-sidenav #sidenav>
        <mat-nav-list>
            <a mat-list-item [routerLink]="'/accounts'"> Accounts </a>
            <a mat-list-item [routerLink]="'/create-account'"> Create Account </a>
            <a mat-list-item [routerLink]="'/contacts'"> Contacts </a>
            <a mat-list-item [routerLink]="'/create-contact'"> Create Contact </a>
            <a mat-list-item [routerLink]="'/activities'"> Activities </a>
            <a mat-list-item [routerLink]="'/create-activity'"> Create Activity </a>
            <a mat-list-item (click)="sidenav.toggle()" href="" mat-list-item>Close</a>
        </mat-nav-list>
    </mat-sidenav>
    <mat-sidenav-content></mat-sidenav-content>
</mat-side-nav-container>

app.moule.ts

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,    
    MatToolbarModule,
    MatSidenavModule,
    MatListModule,
    MatButtonModule,
    MatIconModule,
    HttpClientModule,
    AppRoutingModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }

MatSidenavModulemodule импортируется, но по-прежнему выдает приведенную ниже ошибку

Answer 1

Вы сделали ошибку в теге:

mat-sidenav-container

У вас есть:

mat-side-nav-container

Заменить mat-side-nav-container на mat-sidenav-container.