ng测试无法识别角形材料成分

Question

Im tryng to test my application with NG TEST but the i use angular material in one of my components and they are not recognized as known elements in angular. How can i fix this?

the errors are like this :

'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. ("
<form class="example-form">
    [ERROR ->]<mat-form-field class="example-full-width">
      <input matInput placeholder="Usuário" [formControl"): ng:///DynamicTestModule/TableComponent.html@2:4
Can't bind to 'dataSource' since it isn't a known property of 'mat-table'.
1. If 'mat-table' is an Angular component and it has 'dataSource' input, then verify that it is part of this module.
2. If 'mat-table' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
  </form>

Answer 1

Three things you should check:

1. if you already have imported MatFormFieldModule in you app.module

2. if it has been added to imports array in @NgModule , and also in TestBed.configureTestingModule({...}) because it's about test files xxx.component.spec.ts : imports:[MatFormFieldModule,...]

3. if you have imported CUSTOM_ELEMENTS_SCHEMA :

   import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; in app.module.ts and xxxx.component.spec.ts , and if it has been added to @NgModule and TestBed.configureTestingModule({...}) schemas: [CUSTOM_ELEMENTS_SCHEMA] .

For the last/third one, the error message is quite clear:

To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("</form>.....

Answer 2

Angular Material Components can be used after importing the Module for the component in app.module.ts. You can check the module to be imported in API Tab on official documentation - https://material.angular.io/components/form-field/api .

The error will fixed for mat-form-field after importing the following module but you will also need to import the other modules.

import {MatFormFieldModule} from '@angular/material/form-field';