Угловых 2 Тестов получают ошибку

Question

У меня есть Угловые 2 компонент, который отлично работает, но когда я запускаю этот код ng test пройти все тесты, которые я получаю сообщение об ошибке followind:

Can't bind to 'ngModel' since it isn't a known property of 'mdl-textfield'.                   
    1. If 'mdl-textfield' is an Angular component and it has 'ngModel' input, then verify that it is part of this module.         
    2. If 'mdl-textfield' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message.  
    ("ditedIndex !== i">{{role.name}}</span>                            
         <mdl-textfield *ngIf="editedIndex === i" [ERROR ->][(ngModel)]="roles[i].name" class="full-width" value={{role.name}}></mdl-textfi 

поле>

здесь мой HTML:

<tr *ngFor="let role of roles; let i = index;" (click)="doSelect(role, i)"> 
      <td class="table-id">{{ i + 1 }}</td> 
      <td> 
       <span *ngIf="editedIndex !== i">{{role.name}}</span> 
       <mdl-textfield *ngIf="editedIndex === i" [(ngModel)]="role.name" class="full-width" value={{role.name}}></mdl-textfield> 
      </td> 
      <td> 
       <span *ngIf="editedIndex !== i">{{role.description}}</span> 
       <mdl-textfield *ngIf="editedIndex === i" [(ngModel)]="role.description" class="full-width" value={{role.description}}></mdl-textfield> 
      </td> 
      <td> 
       <button *ngIf="editedIndex === i" mdl-button mdl-button-type="mini-fab" mdl-colored="primary" (click)="doSave($event)" 
        mdl-ripple><mdl-icon>edit</mdl-icon></button> 
       <button *ngIf="editedIndex === i" mdl-button mdl-button-type="mini-fab" mdl-colored="accent" (click)="doDelete($event, i)" 
        mdl-ripple><mdl-icon>remove</mdl-icon></button> 
      </td> 
     </tr> 

Роль - это модель с 2 свойствами.

Почему это нормально работает во время работы, но это не сработало!

Answer 1

, потому что я использую пользовательские компоненты, я обнаружил, что я должен импортировать CUSTOM_ELEMENTS_SCHEMA в app.component.spec.ts

import { CUSTOM_ELEMENTS_SCHEMA} from '@angular/core'; 

и использовать его на схемах

TestBed.configureTestingModule({ 
    declarations: [ 
    AppComponent, 
    ], 
    imports: [ 
    MdlModule, 
    ], 
    schemas: [CUSTOM_ELEMENTS_SCHEMA] 
}); 

Answer 2

Вам необходимо настроить испытательный стенд с любыми необходимыми модулями/компонентами/и т. Д. Единственное, что вы получаете бесплатно, это CommonModule. Все остальное вам нужно настроить с нуля. Это означает, что добавление FormsModule, и независимо от модуля (компонент/директивы/и т.д.) используются для MDL

TestBed.configureTestingModule({ 
    imports: [ 
    FormsModule, 
    AnyMDLModule 
    ], 
    declarations: [], 
    providers: [] 
})