Angular 角度：误差：''；垫形式字段'；不是已知元素

执行单元测试时，会出现如下错误：

错误：“mat-form-field”不是已知元素

错误：“mat-grid-tile”不是已知元素

等等

通常在

app.module.ts

中缺少导入时会出现这些错误，但我确保它们可用：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NavigationviewComponent } from './navigationview/navigationview.component';
import { MainviewComponent } from './mainview/mainview.component';
import { DetailviewComponent } from './detailview/detailview.component';
import { TodolistComponent } from './todolist/todolist.component';
import { ListitemComponent } from './listitem/listitem.component';
import { ListitemdetailComponent } from './listitemdetail/listitemdetail.component';

import { DonePipe } from './DonePipe';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatNativeDateModule } from '@angular/material/core';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatButtonModule} from '@angular/material/button';
import {MatIconModule} from '@angular/material/icon';
import {MatBadgeModule} from '@angular/material/badge';
import {MatGridListModule} from '@angular/material/grid-list';
import {MatSnackBarModule} from '@angular/material/snack-bar';

import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { Configuration } from 'msal';
import {
  MsalModule,
  MsalInterceptor,
  MSAL_CONFIG,
  MSAL_CONFIG_ANGULAR,
  MsalService,
  MsalAngularConfiguration
} from '@azure/msal-angular';

import { isIE, msalAngularConfig, msalConfig } from './app-config';

function MSALConfigFactory(): Configuration {
  return msalConfig;
}

function MSALAngularConfigFactory(): MsalAngularConfiguration {
  return msalAngularConfig;
}

@NgModule({
  declarations: [
    AppComponent,
    NavigationviewComponent,
    MainviewComponent,
    DetailviewComponent,
    TodolistComponent,
    ListitemComponent,
    ListitemdetailComponent,
    DonePipe
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    BrowserAnimationsModule,
    FormsModule,
    CommonModule,
    MsalModule,
    MatDatepickerModule,
    MatNativeDateModule,
    MatInputModule,
    MatFormFieldModule,
    MatButtonModule,
    MatIconModule,
    MatBadgeModule,
    MatGridListModule,
    MatSnackBarModule
  ],
  exports: [
    MatDatepickerModule,
    MatNativeDateModule,
    MatInputModule,
    MatFormFieldModule,
    MatButtonModule,
    MatIconModule,
    MatBadgeModule,
    MatGridListModule,
    MatSnackBarModule
  ],
  providers: [
    MatFormFieldModule,
    MatDatepickerModule,
    MatNativeDateModule,
    MatButtonModule,
    {
      provide: HTTP_INTERCEPTORS,
      useClass: MsalInterceptor,
      multi: true
    },
    {
      provide: MSAL_CONFIG,
      useFactory: MSALConfigFactory
    },
    {
      provide: MSAL_CONFIG_ANGULAR,
      useFactory: MSALAngularConfigFactory
    },
    MsalService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

是否有其他必须考虑的事项，以避免出现错误

---

提前感谢

在单元测试文件中，您必须导入

MatFormFieldModule和MatGridListModule

e

在单元测试文件中，您必须导入

MatFormFieldModule和MatGridListModule

e

尝试导入

MatFormFieldModule，在
.spec
文件中的MatGridListModule

告诉编译器有关Mat表单和网格元素的信息

编辑： 根据Phillip的建议，在每个之前：）

beforeach（（）=>{
TestBed.configureTestingModule({
导入：[MatFormFieldModule，MatGridListModule]，//尝试在
文件中导入
MatFormFieldModule，MatGridListModule
，以告知编译器有关Mat表单和网格元素的信息

编辑：
根据Phillip的建议，在每个之前：）

beforeach（（）=>{
TestBed.configureTestingModule({
imports:[MatFormFieldModule，MatGridListModule]，//缺少单元测试的设置缺少单元测试的设置最好在每次测试之前使用
，
，以便在每次测试之前初始化并执行测试床，而不是最初一次。这样，“测试环境”是干净的，不会产生副作用。另外，添加
done（）
/
async wait
在前/后回调中的逻辑也不是一个好主意。只需将前/后回调定义为async，测试运行程序就会处理所有问题。最后，导入模块并添加
NO_ERRORS_SCHEMA
将最终使导入无效，因为丢失导入的任何错误都将被隐藏恩：无论如何：）@PhilippMeissner更新了我的答案，感谢你宝贵的建议：）最好在每次测试之前使用
，
，这样测试床在每次测试之前就可以初始化并执行，而不是一次。这样“测试环境”就干净了，不会产生任何副作用。另外，添加
done（）
/
async wait
在前/后回调中的逻辑也不是一个好主意。只需将前/后回调定义为async，测试运行程序就会处理所有问题。最后，导入模块并添加
NO_ERRORS_SCHEMA
将最终使导入无效，因为丢失导入的任何错误都将被隐藏恩：无论如何：）@PhilippMeissner更新了我的答案谢谢你宝贵的建议：）
beforeEach(() => {
  TestBed.configureTestingModule({
  imports: [MatFormFieldModule, MatGridListModule], // <== need to import both modules.
    providers: [...],
    declarations: [...],
 });
});