Angular2 没有将 "exportAs"设置为 "ngModel"Karma/Jasmine 的指令

Question

我正在开发一个运行良好但 Jasmine 测试抛出模板错误的应用程序。由于运行应用程序有效，模板引用变量可以绑定(bind)到 ngModel，但为什么在运行测试时它不起作用？我正在使用 "@angular/forms": "~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 { }

输入.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 异步解析，并返回一个 promise 。所以你不能在编译之前尝试创建组件。你需要做的

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