mat-option'不是一个已知的元素,angular4 spec.ts错误

时间:2018-10-06 16:52:23

标签: angular

我正在尝试测试具有角材料分量的组件。

beforeEach(async(() => {
TestBed.configureTestingModule({
  declarations: [ serviceCategoriesComponent ],
  imports: [
    MatDatepickerModule,
    MatInputModule,
    MatIconModule,
    AngularMultiSelectModule,
    MatSlideToggleModule,
    MatPaginatorModule,
    MatSortModule,
    MatChipsModule,
    MatAutocompleteModule,
    MatTooltipModule,
    MatSelectModule,
    MatFormFieldModule,
    FormsModule,
    ReactiveFormsModule
  ]
})
.compileComponents();

}));

这些我已经导入了。但是我遇到了错误:

1. If 'mat-option' is an Angular component, then verify that it is part of this module.
    2. If 'mat-option' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

请帮助。

1 个答案:

答案 0 :(得分:0)

请在以下示例中尝试导入所有角形材料分量:

    import './polyfills';

    import {CdkTableModule} from '@angular/cdk/table';
    import {CdkTreeModule} from '@angular/cdk/tree';
    import {HttpClientModule} from '@angular/common/http';
    import {NgModule} from '@angular/core';
    import {FormsModule, ReactiveFormsModule} from '@angular/forms';
    import {
      MatAutocompleteModule,
      MatBadgeModule,
      MatBottomSheetModule,
      MatButtonModule,
      MatButtonToggleModule,
      MatCardModule,
      MatCheckboxModule,
      MatChipsModule,
      MatDatepickerModule,
      MatDialogModule,
      MatDividerModule,
      MatExpansionModule,
      MatGridListModule,
      MatIconModule,
      MatInputModule,
      MatListModule,
      MatMenuModule,
      MatNativeDateModule,
      MatPaginatorModule,
      MatProgressBarModule,
      MatProgressSpinnerModule,
      MatRadioModule,
      MatRippleModule,
      MatSelectModule,
      MatSidenavModule,
      MatSliderModule,
      MatSlideToggleModule,
      MatSnackBarModule,
      MatSortModule,
      MatStepperModule,
      MatTableModule,
      MatTabsModule,
      MatToolbarModule,
      MatTooltipModule,
      MatTreeModule,
    } from '@angular/material';
    import {BrowserModule} from '@angular/platform-browser';
    import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
    import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
    import {SelectOverviewExample} from './app/select-overview-example';

    @NgModule({
      exports: [
        CdkTableModule,
        CdkTreeModule,
        MatAutocompleteModule,
        MatBadgeModule,
        MatBottomSheetModule,
        MatButtonModule,
        MatButtonToggleModule,
        MatCardModule,
        MatCheckboxModule,
        MatChipsModule,
        MatStepperModule,
        MatDatepickerModule,
        MatDialogModule,
        MatDividerModule,
        MatExpansionModule,
        MatGridListModule,
        MatIconModule,
        MatInputModule,
        MatListModule,
        MatMenuModule,
        MatNativeDateModule,
        MatPaginatorModule,
        MatProgressBarModule,
        MatProgressSpinnerModule,
        MatRadioModule,
        MatRippleModule,
        MatSelectModule,
        MatSidenavModule,
        MatSliderModule,
        MatSlideToggleModule,
        MatSnackBarModule,
        MatSortModule,
        MatTableModule,
        MatTabsModule,
        MatToolbarModule,
        MatTooltipModule,
        MatTreeModule,
      ]
    })
    export class DemoMaterialModule {}

    @NgModule({
      imports: [
        BrowserModule,
        BrowserAnimationsModule,
        FormsModule,
        HttpClientModule,
        DemoMaterialModule,
        MatNativeDateModule,
        ReactiveFormsModule,
      ],
      entryComponents: [SelectOverviewExample],
      declarations: [SelectOverviewExample],
      bootstrap: [SelectOverviewExample],
      providers: []
    })
    export class AppModule {}

    platformBrowserDynamic().bootstrapModule(AppModule);


    /**  Copyright 2018 Google Inc. All Rights Reserved.
        Use of this source code is governed by an MIT-style license that
        can be found in the LICENSE file at http://angular.io/license */

https://stackblitz.com/angular/ynlervbjvrv?file=main.ts