“'mat-form-field' 不是已知元素：

Question

我有一个使用材料的 Angular 应用程序，在我的 materials.module.ts 文件夹中我导入了 MatFormFieldModule 但它没有被读取。 其他材料组件工作得很好，但没有找到表单字段。

这是组件：

<mat-form-field appearance="fill">
    <mat-label>Input</mat-label>
    <input matInput>
</mat-form-field>

这是材料模块：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {MatToolbarModule} from '@angular/material/toolbar';
import {MatIconModule} from '@angular/material/icon';
import {MatTooltipModule} from '@angular/material/tooltip';
import {MatDialogModule} from '@angular/material/dialog';
import {MatInputModule} from '@angular/material/input';
import {MatFormFieldModule} from '@angular/material/form-field';
import {MatSelectModule} from '@angular/material/select';

const MaterialComponents = [
  MatToolbarModule,
  MatIconModule,
  MatTooltipModule,
  MatDialogModule,
  MatInputModule,
  MatFormFieldModule,
  MatSelectModule
]

@NgModule({
  imports: [
    CommonModule,
    ...MaterialComponents
  ],
  exports: [
    MaterialComponents
  ]
})
export class MaterialsModule { }

这是应用程序模块：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {HeaderComponent } from './components/header/header.component';
import { HomeComponent } from './components/home/home.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MaterialsModule } from './materials/materials-module/materials.module';

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    HomeComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    FormsModule,
    ReactiveFormsModule,
    MaterialsModule
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule { }

这是我不断收到的错误：

Error: src/app/components/auth/auth.component.html:3:1 - error NG8001: 'mat-form-field' is not a known element:        
1. If 'mat-form-field' is an Angular component, then verify that it is part of this module.
2. If 'mat-form-field' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

3 <mat-form-field appearance="fill">
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  src/app/components/auth/auth.component.ts:7:16
    7   templateUrl: './auth.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component AuthComponent.


Error: src/app/components/auth/auth.component.html:4:5 - error NG8001: 'mat-label' is not a known element:
1. If 'mat-label' is an Angular component, then verify that it is part of this module.
2. If 'mat-label' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

4     <mat-label>Input</mat-label>
× Failed to compile.

Answer 1

根据您分享的内容，错误指向AppModule的声明数组中未列出的组件。 它指向auth.component但我没有在 AppModule declarations中与AppModule和HomeComponent HeaderComponent看到它。 我想它被命名为AuthComponent 。 将其添加到列表中。