Uncaught Error: неожиданная директива 'MatFormField', импортированная модулем 'AppModule'.Пожалуйста, добавьте аннотацию @NgModule

Question

Я хочу использовать сборщик угловых дат, но я получаю эту ошибку.

Uncaught Error: неожиданная директива MatFormField импортирована модулем AppModule.Пожалуйста, добавьте аннотацию @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 { }

Answer 1

Чтобы импортировать компоненты и директивы и т. Д., Вы импортируете их модули, а не фактические компоненты и директивы.Поэтому вам нужно импортировать 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 { }