Angular2 "exportAs"が "ngModel"に設定されている指示はありませんカルマ/ジャスミン

Question

私はうまく動作するアプリケーションで作業していますが、ジャスミンテストはテンプレートエラーを投げます。アプリケーションの実行は動作するので、テンプレート参照変数を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(); 
})