TypeScript-'s Angular Framework Error - "There is no directive with exportAs set to ngForm"

I keep getting this error while using TypeScript's Angular2-forms framework:

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

Here's my code

project dependencies :

  "dependencies": {
    "@angular/common": "2.0.0-rc.6",
    "@angular/compiler": "2.0.0-rc.6",
    "@angular/core": "2.0.0-rc.6",
    "@angular/forms": "2.0.0-rc.6",
    "@angular/http": "2.0.0-rc.6",
    "@angular/platform-browser": "2.0.0-rc.6",
    "@angular/platform-browser-dynamic": "2.0.0-rc.6",
    "@angular/router": "3.0.0-rc.2",
    "ng2-bootstrap": "^1.1.1",
    "reflect-metadata": "^0.1.8",
    "core-js": "^2.4.0",
    "es6-module-loader": "^0.17.8",
    "rxjs": "5.0.0-beta.11",
    "systemjs": "0.19.27",
    "zone.js": "0.6.17",
    "jquery": "3.0.0",

And this is the Login Template :

<form #loginForm="ngForm" (ng-submit)="authenticate(loginForm.value)">

...and the Login Component :

import { Component } from '@angular/core';
import {Http, Headers}  from '@angular/http';
    selector: 'login-cmp',
    templateUrl: 'login.component.html'
export class LoginComponent {
  constructor($http: Http) {
    this.$http = $http;
  authenticate(data) {

I have this Error :

zone.js?1474211973422:484 Unhandled Promise rejection: Template parse errors:    
There is no directive with "exportAs" set to "ngForm" ("
            <form [ERROR ->]#loginForm="ngForm" 


  • import { FormsModule }   from '@angular/forms';
      imports: [
                 FormsModule      //<----------make sure you have added this.