Question

我已经在我的spec.ts中导入了角形材料，但是在尝试运行对该特定组件进行ng测试时遇到以下错误：

错误：模板解析错误：

'mat-form-field'不是一个已知元素： 1.如果“ mat-form-field”是Angular组件，则请验证它是否属于此模块。 2.如果“ mat-form-field”是Web组件，则将“ CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“ @ NgModule.schemas”以禁止显示此消息。（“

[错误->] ] [dataSource] =“ parts” matSort class =“ mat-elevation-z8”> ”）：ng：///DynamicTestModule/PartViewComponent.html@6：23 找不到管道'uuidAbbrev'（“ eader-cell * matHeaderCellDef mat-sort-header> Uuid {{[ERROR->] row.uuid | uuidAbbrev}} ”）：ng：///DynamicTestModule/PartViewComponent.html@10：44 无法绑定到'matHeaderRowDef'，因为它不是'tr'的已知属性。（“ ] matHeaderRowDef =“ displayedProps”> [错误->] ] * matRowDef =“让行；列：displayProps;”> ”）：ng：///DynamicTestModule/PartViewComponent.html@24：35 嵌入式模板上的任何指令均未使用属性绑定matRowDefColumns。确保属性名称拼写正确，并且所有指令均在“ @ NgModule.declarations”中列出。（“ [错误->] http：// localhost：9876 / _karma_webpack_ / vendor.js：36418：17）在TemplateParser.push ../ node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse（http://localhost:9876/_karma_webpack_/vendor.js:54593:19）中在JitCompiler.push ../ node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate（http://localhost:9876/_karma_webpack_/vendor.js:60159:37）中在JitCompiler.push ../ node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate（http://localhost:9876/_karma_webpack_/vendor.js:60146:23）中在http://localhost:9876/_karma_webpack_/vendor.js:60089:62 在Set.forEach（）在JitCompiler.push ../ node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents（http://localhost:9876/_karma_webpack_/vendor.js:60089:19）中在http://localhost:9876/_karma_webpack_/vendor.js:60007:19 在Object.then（http://localhost:9876/_karma_webpack_/vendor.js:36409:77）在JitCompiler.push ../ node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndAllComponents（http://localhost:9876/_karma_webpack_/vendor.js:60005:26）中 ```

Answer 1

几件事：

为避免直接从Angular Material导入模块，您需要创建一个单独的Angular模块。这是一个好习惯，应该坚持下去：）

第二，您需要导入刚在TestBed中创建的Angular Material模块：

  beforeEach(async(() => {
            TestBed.configureTestingModule({
              imports: [MaterialModule],
              declarations: [PartViewComponent],
              providers: [PartService]
            })
            .compileComponents();
          }));

我的MaterialModule示例：

import { NgModule } from '@angular/core';
import {
  MatAutocompleteModule,
  MatButtonModule,
  MatButtonToggleModule,
  MatCardModule,
  MatCheckboxModule,
  MatChipsModule,
  MatDatepickerModule,
  MatDialogModule,
  MatExpansionModule,
  MatFormFieldModule,
  MatGridListModule,
  MatIconModule,
  MatInputModule,
  MatListModule,
  MatMenuModule,
  MatNativeDateModule,
  MatRadioModule,
  MatRippleModule,
  MatSelectModule,
  MatSidenavModule,
  MatSlideToggleModule,
  MatSnackBarModule,
  MatStepperModule,
  MatTableModule,
  MatTabsModule,
  MatToolbarModule,
  MatTooltipModule
} from '@angular/material';

@NgModule({
  imports: [
    MatSidenavModule,
    MatToolbarModule,
    MatButtonModule,
    MatButtonToggleModule,
    MatIconModule,
    MatListModule,
    MatCardModule,
    MatDialogModule,
    MatSelectModule,
    MatInputModule,
    MatFormFieldModule,
    MatAutocompleteModule,
    MatInputModule,
    MatTableModule,
    MatSlideToggleModule,
    MatRadioModule,
    MatDatepickerModule,
    MatNativeDateModule,
    MatSnackBarModule,
    MatTooltipModule,
    MatTabsModule,
    MatRippleModule,
    MatGridListModule,
    MatStepperModule,
    MatCheckboxModule,
    MatMenuModule,
    MatChipsModule,
    MatExpansionModule
  ],
  exports: [
    MatSidenavModule,
    MatToolbarModule,
    MatButtonModule,
    MatButtonToggleModule,
    MatIconModule,
    MatListModule,
    MatCardModule,
    MatDialogModule,
    MatSelectModule,
    MatInputModule,
    MatFormFieldModule,
    MatAutocompleteModule,
    MatTableModule,
    MatSlideToggleModule,
    MatRadioModule,
    MatDatepickerModule,
    MatSnackBarModule,
    MatTooltipModule,
    MatTabsModule,
    MatRippleModule,
    MatGridListModule,
    MatStepperModule,
    MatMenuModule,
    MatCheckboxModule,
    MatChipsModule,
    MatExpansionModule
  ],
  declarations: []
})
export class MaterialModule {}

最后但并非最不重要的一点是，您可能会遇到另一个与管道uuidAbbrev相关的错误，请确保将其添加到TestBed.configureTestingModule 声明数组中>

使用Jasmine和Karma进行角度单元测试时出错

1 个答案: