There is no directive with "exportAs" set to "ngForm"

Question

Got the below error when I try to test LoginComponent

PhantomJS 2.1.1 (Linux 0.0.0): Executed 3 of 55 (1 FAILED) (0 secs / 0.307 secs)
PhantomJS 2.1.1 (Linux 0.0.0) LoginComponent should create FAILED
Failed: Uncaught (in promise): Error: Template parse errors:
There is no directive with "exportAs" set to "ngForm" ("iv class="col-md-4 col-sm-6 col-md-offset-4 col-sm-offset-3">
          <form (ngSubmit)="login(f)" [ERROR ->]#f="ngForm">
            <div class="card card-login">
              <div class="card-header text-cen"): LoginComponent@5:38

A part my component looks like,

login.component.ts

export class LoginComponent {

  isBusy: boolean = false;
  user: User;

  constructor(
    private router: Router,
    private notificationService: NotificationService,
    private authService: AuthenticationService,
    private sessionService: SessionService,
  ) { }
  ....
}

And the corresponding spec looks like,

login.component.spec.ts

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

  beforeEach(async(() => {
    let routerStub = new RouterStub();

    TestBed.configureTestingModule({
      imports: [HttpModule],
      declarations: [,
        LoginComponent
      ],
      providers: [{
        provide: Http, useFactory: (backend, options) => {
          return new Http(backend, options);
        },
        deps: [MockBackend, BaseRequestOptions]
      },
      { provide: Router, useClass: class { navigate = jasmine.createSpy("navigate"); } },
        MockBackend,
        BaseRequestOptions,
        AuthenticationService,
        SessionService,
        NotificationService
      ],
      schemas: [NO_ERRORS_SCHEMA],
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(LoginComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

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

seems like it fails to create a fake component using the above providers, declarations, etc. Like other's said, I already included FormsModule inside @NgModule decorator.

Answer 1

Not sure what @NgModule decorator you added it to but I think it should be added in

 TestBed.configureTestingModule({
      imports: [HttpModule, FormsModule],