Angular2 issue: There is no directive with “exportAs” set to “ngForm”

I 'am facing this frustrating issue

There is no directive with "exportAs" set to "ngForm" ("
]#f="ngForm" (ngSubmit)="onSubmit(f)" class="form-horizontal"> "): ng:///ComponentsModule/EquipeComponent.html@8:12 Error: Template parse errors: There is no directive with "exportAs" set to "ngForm" (" ]#f="ngForm" (ngSubmit)="onSubmit(f)" class="form-horizontal"> "): ng:///ComponentsModule/EquipeComponent.html@8:12

This is what my app.module.ts contains

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { LocationStrategy, HashLocationStrategy } from '@angular/common';
import { NgForm } from '@angular/forms';
import { FormsModule, ReactiveFormsModule }   from '@angular/forms';

import { AppComponent } from './app.component';
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { TabsModule } from 'ngx-bootstrap/tabs';
import { NAV_DROPDOWN_DIRECTIVES } from './shared/nav-dropdown.directive';

import { ChartsModule } from 'ng2-charts/ng2-charts';
import { SIDEBAR_TOGGLE_DIRECTIVES } from './shared/sidebar.directive';
import { AsideToggleDirective } from './shared/aside.directive';
import { BreadcrumbsComponent } from './shared/breadcrumb.component';

// Routing Module
import { AppRoutingModule } from './app.routing';

// Layouts
import { FullLayoutComponent } from './layouts/full-layout.component';
import { SimpleLayoutComponent } from './layouts/simple-layout.component';

@NgModule({
  imports: [
    BrowserModule,
    AppRoutingModule,
    BsDropdownModule.forRoot(),
    TabsModule.forRoot(),
    ChartsModule,
    FormsModule,
    ReactiveFormsModule                        
  ],
  declarations: [
    AppComponent,
    FullLayoutComponent,
    SimpleLayoutComponent,
    NAV_DROPDOWN_DIRECTIVES,
    BreadcrumbsComponent,
    SIDEBAR_TOGGLE_DIRECTIVES,
    AsideToggleDirective,
  ],
  providers: [{
    provide: LocationStrategy,
    useClass: HashLocationStrategy
  }],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

I'am almost new to Angular2 so I can't figure out what is the problem with my code .

This is the content of equipe.component.html

<div class="animated fadeIn">
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <strong>Ajout Equipe</strong>
                </div>
                <div class="card-block">
                    <form #f="ngForm" (ngSubmit)="onSubmit(f)" class="form-horizontal">
                        <div class="form-group row">
                            <label class="col-md-3 form-control-label" for="text-input">Nom Equipe</label>
                            <div class="col-md-9">
                                <input type="text" id="text-input" name="text-input" class="form-control" placeholder="Saisir le nom de l'equipe" required>
                            </div>
                            <div class="form-group row">
                                <label class="col-md-3 form-control-label" for="textarea-input">Description</label>
                                <div class="col-md-9">
                                    <textarea id="textarea-input" name="textarea-input" rows="9" class="form-control" placeholder="Description de l'equipe"></textarea>
                                </div>
</div>
                        </div>
                    </form>
                    </div>
                    <div class="card-footer">
                        <button type="submit" class="btn btn-sm btn-primary pull-right"><i class="fa fa-dot-circle-o"></i> Ajouter</button>
                    </div>
                </div>
            </div><!--/.col-->
        </div><!--/.row-->
    </div>

And this is the content of equipe.component.ts:

import { Component } from '@angular/core';
import { NgForm} from '@angular/forms';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';

@Component({
templateUrl: 'equipe.component.html',
})
export class EquipeComponent {

constructor() { }
onSubmit(f:NgForm) {
console.log('this is a test');
}
}

This is the content of my ComponentsModule

import { NgModule } from '@angular/core';

import { ButtonsComponent } from './buttons.component';
import { CardsComponent } from './cards.component';

// Forms Component
import { FormsComponent } from './forms.component';
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';

import { SocialButtonsComponent } from './social-buttons.component';
import { SwitchesComponent } from './switches.component';
import { TablesComponent } from './tables.component';

// Modal Component
import { ModalModule } from 'ngx-bootstrap/modal';
import { ModalsComponent } from './modals.component';

// Tabs Component
import { TabsModule } from 'ngx-bootstrap/tabs';
import { TabsComponent } from './tabs.component';
// Ressource Component
import { RessourceComponent } from './ressource.component';
// Equipe Component
import { EquipeComponent } from './equipe.component';
// Components Routing
import { ComponentsRoutingModule } from './components-routing.module';

@NgModule({
imports: [
ComponentsRoutingModule,
BsDropdownModule.forRoot(),
ModalModule.forRoot(),
TabsModule
],
declarations: [
ButtonsComponent,
CardsComponent,
FormsComponent,
ModalsComponent,
SocialButtonsComponent,
SwitchesComponent,
TablesComponent,
TabsComponent,
RessourceComponent,
EquipeComponent
]
})
export class ComponentsModule { }

You have to import FormsModule or other module that exportes FormsModule to @NgModule where EquipeComponent has been declared.

@NgModule({
  imports: [
    FormsModule,
    // or SharedModule that exports FormsModule
    ...
  ],
  declarations: [
    EquipeComponent,
    SomeComponent
  ]
})
export class ComponentsModule {}

In the preceding code angular will compile EquipeComponent template using SomeComponent directive and all directives that other modules has exported

export const TEMPLATE_DRIVEN_DIRECTIVES: Type<any>[] = [NgModel, NgModelGroup, NgForm];
                                                                                ^^^^^
@NgModule({
  declarations: TEMPLATE_DRIVEN_DIRECTIVES,
  providers: [RadioControlRegistry],
  exports: [InternalFormsSharedModule, TEMPLATE_DRIVEN_DIRECTIVES]
                                              ^^^^^^^^^^^^
})
export class FormsModule {
}

@Directive({
  ...
  exportAs: 'ngForm'
})
export class NgForm extends ControlContainer implements Form {