Angular2没有指令将“exportAs”设置为“ngModel”Karma/Jasmine

Question

我正在处理运行良好但Jasmine测试会抛出模板错误的应用程序。由于运行该应用程序的工作原理，模板引用变量可以绑定到ngModel，但为什么在运行测试时不工作？我使用 “@角/形式”： “〜2.2.3”，

ERROR: 'Unhandled Promise rejection:', 'Template parse errors: 
There is no directive with "exportAs" set to "ngModel" ("d="name" required pattern="^[a-zA-Z]+[\s\S]*" 
       [(ngModel)]="model.name" name="name" [ERROR ->]#name="ngModel" >          
       </div>                         
       <div [hidden]="name.valid || name.pristine" 

我app.module.ts：

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { FormsModule } from '@angular/forms'; 
import { HttpModule } from '@angular/http'; 

import { AppComponent } from './app.component'; 
import { LinearProgressIndicatorComponent } from './linear-progress-indicator/linear-progress-indicator.component'; 
import { MyNewDirectiveDirective } from './directives/my-new-directive.directive'; 
import { MyNewServiceDirective } from './services/my-new-service.directive'; 
import { HeaderComponent } from './components/header/header.component'; 
import { MenuComponent } from './components/menu/menu.component'; 
import { WatchpanelComponent } from './components/watchpanel/watchpanel.component'; 
import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; 
import { InputComponent } from './components/input/input.component'; 
import { LocalStorage } from './services/local-storage.service'; 
import { MaterialModule } from '@angular/material'; 

@NgModule({ 
    declarations: [ 
    AppComponent, 
    LinearProgressIndicatorComponent, 
    MyNewDirectiveDirective, 
    MyNewServiceDirective, 
    HeaderComponent, 
    MenuComponent, 
    WatchpanelComponent, 
    InputComponent 
    ], 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpModule, 
    NgbModule.forRoot(), 
    MaterialModule.forRoot(), 
    ], 
    exports: [ MaterialModule ], 
    providers: [LocalStorage], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

input.component.spec.ts：

import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 
import { By } from '@angular/platform-browser'; 
import { DebugElement } from '@angular/core'; 

import { InputComponent } from './input.component'; 

describe('InputComponent',() => { 
    let component: InputComponent; 
    let fixture: ComponentFixture<InputComponent>; 

    beforeEach(async(() => { 
    TestBed.configureTestingModule({ 
     declarations: [ InputComponent ] 
    }) 
    .compileComponents(); 

    fixture = TestBed.createComponent(InputComponent); 
    component = fixture.componentInstance; 
    fixture.detectChanges(); 
    })); 

    it('should create',() => { 
    expect(component).toBeTruthy(); 
    }); 
}); 

Answer 1

就像您在AppModule中所做的那样，您需要将FormsModule导入TestBed.configureTestingModule。您可以使用此配置完全独立的模块，只是为了测试

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

而且另一回事。

TestBed.configureTestingModule({ 
    ... 
}) 
.compileComponents(); 

fixture = TestBed.createComponent(InputComponent); 

你不能这样做。 .compileComponents异步解析，并返回一个承诺。所以你不能尝试在编译之前创建组件。你需要做

.compileComponents().then(() => { 
    fixture = TestBed.createComponent(InputComponent); 
    component = fixture.componentInstance; 
    fixture.detectChanges(); 
})