title: Angular2 issue: There is no directive with “exportAs” set to “ngForm”
body: <p>I 'am facing this frustrating issue </p>
  
  <blockquote>
    <p>There is no directive with "exportAs" set to "ngForm" ("<br>
                      
                      
                          ]#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</p>
  </blockquote>
  
  <p>This is what my <strong><em>app.module.ts</em></strong> contains</p>
  
  <pre><code>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 { }
  </code></pre>
  
  <p>I'am almost new to Angular2 so I can't figure out what is the problem with my code .</p>
  
  <p>This is the content of <strong><em>equipe.component.html</em></strong></p>
  
  <pre><code>&lt;div class="animated fadeIn"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-md-12"&gt;
              &lt;div class="card"&gt;
                  &lt;div class="card-header"&gt;
                      &lt;strong&gt;Ajout Equipe&lt;/strong&gt;
                  &lt;/div&gt;
                  &lt;div class="card-block"&gt;
                      &lt;form #f="ngForm" (ngSubmit)="onSubmit(f)" class="form-horizontal"&gt;
                          &lt;div class="form-group row"&gt;
                              &lt;label class="col-md-3 form-control-label" for="text-input"&gt;Nom Equipe&lt;/label&gt;
                              &lt;div class="col-md-9"&gt;
                                  &lt;input type="text" id="text-input" name="text-input" class="form-control" placeholder="Saisir le nom de l'equipe" required&gt;
                              &lt;/div&gt;
                              &lt;div class="form-group row"&gt;
                                  &lt;label class="col-md-3 form-control-label" for="textarea-input"&gt;Description&lt;/label&gt;
                                  &lt;div class="col-md-9"&gt;
                                      &lt;textarea id="textarea-input" name="textarea-input" rows="9" class="form-control" placeholder="Description de l'equipe"&gt;&lt;/textarea&gt;
                                  &lt;/div&gt;
  &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/form&gt;
                      &lt;/div&gt;
                      &lt;div class="card-footer"&gt;
                          &lt;button type="submit" class="btn btn-sm btn-primary pull-right"&gt;&lt;i class="fa fa-dot-circle-o"&gt;&lt;/i&gt; Ajouter&lt;/button&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;&lt;!--/.col--&gt;
          &lt;/div&gt;&lt;!--/.row--&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>And this is the content of <strong><em>equipe.component.ts</em></strong>:</p>
  
  <pre><code>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');
  }
  }
  </code></pre>
  
  <p>This is the content of my <strong><em>ComponentsModule</em></strong></p>
  
  <pre><code>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 { }
  </code></pre>