Angular2 No directive with "exportAs" set to "ngModel" Karma / Jasmine

Question

I am working on an application that works fine, but Jasmine tests cause template errors. Since the application works, the template reference variable can be bound to ngModel, but why does it not work when running the tests? I am using "@ 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"  

My 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

Like in AppModule, you need to import FormsModuleinto TestBed.configureTestingModule. You use this to configure a fully independent module for testing only.

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

And one more thing.

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

fixture = TestBed.createComponent(InputComponent);

. .compileComponents . .

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