未捕获错误（模块“AppModule”导入的意外指令“MatFormField”。请添加@NgModule注释） _错误

【未捕获错误（模块“AppModule”导入的意外指令“MatFormField”。请添加@NgModule注释）】书到用时方恨少，事非经过不知难。这篇文章主要讲述未捕获错误：模块“AppModule”导入的意外指令“MatFormField”。请添加@NgModule注释相关的知识，希望能为你提供帮助。
我想使用Angular Material Date选择器但我收到此错误。

未捕获错误：模块“AppModule”导入的意外指令“MatFormField”。请添加@NgModule注释。

app.component.html

< mat-form-field> < input matInput [matDatepicker]="picker" placeholder="Choose a date"> < mat-datepicker-toggle matSuffix [for]="picker"> < /mat-datepicker-toggle> < mat-datepicker #picker> < /mat-datepicker> < /mat-form-field>

app.module.ts

import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import {MatFormField} from '@angular/material'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, MatFormField ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

答案要导入组件和指令等，请导入其模块，而不是实际的组件和指令。所以你需要导入MatFormFieldModule而不是MatFormField：

import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { MatFormFieldModule } from '@angular/material/form-field'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, MatFormFieldModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }