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(); 
})