模板解析錯誤：“mat-sidenav-container”不是已知元素

Question

我是 Angular/material2 的新手，我不確定我在嘗試遵循sidenav上的文檔時sidenav 。

在我的 AppComponent 中，我想顯示一個 sidenav，我已經實現如下：

app.component.tss

import {
    NgModule,
    Component
} from '@angular/core';
import {
    MatSidenavModule,
    MatSidenavContent,
    MatSidenav
} from '@angular/material';
import {
    BrowserAnimationsModule
} from '@angular/platform-browser/animations';

@NgModule({
    imports: [
        BrowserAnimationsModule,
        MatSidenav
    ],
    exports: [
        BrowserAnimationsModule,
        MatSidenav
    ]
})
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    title = 'app';
}

應用程序組件.html

<!--The content below is only a placeholder and can be replaced.-->
<mat-sidenav-container>

</mat-sidenav-container>
<div style="text-align:center">
    <h1>
        Welcome to {{ title }}!
    </h1>
    <nav>
        <a routerLink="/clients">Clients</a>
    </nav>
    <router-outlet>

    </router-outlet>

</div>]

錯誤是：

Uncaught Error: Template parse errors:
'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

我的代碼中缺少什么？

Answer 1

Sajeetharan 的答案不適用於較新版本的角材料。

從這里：

MaterialModule 在 2.0.0-beta.3 版本中被棄用，它在 2.0.0-beta.11 版本中被完全刪除......

所以，要解決這個問題：

在 2.0.0-beta.3 后：

import {
  MatSidenavModule,
} from '@angular/material';

@NgModule({
  exports: [MatSidenavModule],
  imports: [
    MatSidenavModule
  ],
})

在舊版本中：

@NgModule({
  imports: [
    MaterialModule
  ],
})

Answer 2

您需要import { MaterialModule } from './material.module';導入import { MaterialModule } from './material.module'; 在 app.module.ts

imports: [    
    MaterialModule 
  ]

由於material module已折舊，因此您需要使用 Angular 最新版本

import { MatSidenavModule } from '@angular/material/sidenav';

Answer 3

Angular 9 實現

import { MatSidenavModule } from '@angular/material/sidenav';

imports: [MatSidenavModule]