title: There is no directive with “exportAs” set to “ngForm”
body: <p>I have included <code>FormsModule</code> but it showing me error.</p>
  
  <pre><code>There is no directive with “exportAs” set to “ngForm” 
  </code></pre>
  
  <p>My Login.component.ts :- </p>
  
  <pre><code>import { Component } from '@angular/core';
  import { Http, Response , RequestOptions , Headers , URLSearchParams } from '@angular/http';
  import {FormsModule} from '@angular/forms';
  
  @Component({
      templateUrl: './login.component.html'
  })
  
  export class LoginComponent {
      apiRoot : String = "http://httpbin.org";
      // search code starts here
  
      // data = string;
      constructor(private http: Http){
  
      }
      onSubmit(value){
  
          let name = value.name;
          let password = value.password;
          let url = `${this.apiRoot}/post`;
          this.http.post(url, {name:name,password:password}).subscribe(res =&gt; console.log(res.json()));
          console.log('submit');
  
      }
  
  
  }
  </code></pre>
  
  <p>My login.module.ts :- </p>
  
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  
  import { jqxGridComponent } from 'jqwidgets-scripts/jqwidgets-ts/angular_jqxgrid';
  import { AppComponent } from './../../app.component';
  import { FormsModule, ReactiveFormsModule , FormGroup} from '@angular/forms';
  import { HttpModule } from '@angular/http';
  import { LoginComponent } from './login.component';
  
  @NgModule({
    declarations: [
        AppComponent, jqxGridComponent, LoginComponent
    ],
    imports: [
      BrowserModule,
      FormsModule,
      HttpModule,
      ReactiveFormsModule
  
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class LoginModule { }  
  </code></pre>
  
  <p>my login.component.html</p>
  
  <pre><code>&lt;div class=""&gt;
    &lt;form (ngSubmit)="onSubmit(heroForm.value)" #heroForm="ngForm"&gt;
        &lt;input type="text" name="name" [(ngModel)]="name" /&gt;
        &lt;input type="password" name="password" [(ngModel)]="password" /&gt;
        &lt;br/&gt;
         &lt;input type="checkbox" name="vehicle" value="Bike" [(ngModel)]="vehicle"&gt; I have a bike&lt;br&gt;
           &lt;input type="checkbox" name="vehicle" value="Car" &gt; I have a car&lt;br&gt;
        &lt;button type="submit"&gt;Send&lt;/button&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I tried with making new angular project and it works with main app.module.ts, app.component.ts and app.component.html files but when I tried with login files it didn't works.</p>
  
  <p>I'm new to Angular-5 so may be I'm missing something when we are creating new login modules.</p>
  
  <p>Edit :- </p>
  
  <p>App components :- </p>
  
  <pre><code>app.component.ts 
  
  import { Component, OnInit } from '@angular/core';
  import { Router, NavigationEnd } from '@angular/router';
  
  @Component({
    // tslint:disable-next-line
    selector: 'body',
    template: '&lt;router-outlet&gt;&lt;/router-outlet&gt;'
  })
  export class AppComponent implements OnInit {
    constructor(private router: Router) { }
  
    ngOnInit() {
      this.router.events.subscribe((evt) =&gt; {
        if (!(evt instanceof NavigationEnd)) {
          return;
        }
        window.scrollTo(0, 0)
      });
    }
  }
  </code></pre>
  
  <p>app.module.ts</p>
  
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  import { NgModule } from '@angular/core';
  import { LocationStrategy, HashLocationStrategy } from '@angular/common';
  import { FormsModule, ReactiveFormsModule } from '@angular/forms';
  import { HttpModule } from '@angular/http';
  import { AppComponent } from './app.component';
  // Import containers
  import {
    FullLayoutComponent,
    SimpleLayoutComponent
  } from './containers';
  
  const APP_CONTAINERS = [
    FullLayoutComponent,
    SimpleLayoutComponent
  ]
  
  // Import components
  import {
    AppAsideComponent,
    AppBreadcrumbsComponent,
    AppFooterComponent,
    AppHeaderComponent,
    AppSidebarComponent,
    AppSidebarFooterComponent,
    AppSidebarFormComponent,
    AppSidebarHeaderComponent,
    AppSidebarMinimizerComponent,
    APP_SIDEBAR_NAV
  } from './components';
  
  const APP_COMPONENTS = [
    AppAsideComponent,
    AppBreadcrumbsComponent,
    AppFooterComponent,
    AppHeaderComponent,
    AppSidebarComponent,
    AppSidebarFooterComponent,
    AppSidebarFormComponent,
    AppSidebarHeaderComponent,
    AppSidebarMinimizerComponent,
    APP_SIDEBAR_NAV
  ]
  
  // Import directives
  import {
    AsideToggleDirective,
    NAV_DROPDOWN_DIRECTIVES,
    ReplaceDirective,
    SIDEBAR_TOGGLE_DIRECTIVES
  } from './directives';
  
  const APP_DIRECTIVES = [
    AsideToggleDirective,
    NAV_DROPDOWN_DIRECTIVES,
    ReplaceDirective,
    SIDEBAR_TOGGLE_DIRECTIVES
  ]
  
  // Import routing module
  import { AppRoutingModule } from './app.routing';
  
  // Import 3rd party components
  import { ChartsModule } from 'ng2-charts/ng2-charts';
  import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
  import { ModalModule } from 'ngx-bootstrap';
  import { TabsModule } from 'ngx-bootstrap/tabs';
  
  @NgModule({
    imports: [
      BrowserModule,
      BrowserAnimationsModule,
      AppRoutingModule,
      ChartsModule,
      HttpModule,
      FormsModule,
      ReactiveFormsModule,
      BsDropdownModule.forRoot(),
      ModalModule.forRoot(),
      TabsModule.forRoot(),
    ],
    declarations: [
      AppComponent,
      ...APP_CONTAINERS,
      ...APP_COMPONENTS,
      ...APP_DIRECTIVES
    ],
    providers: [{
      provide: LocationStrategy,
      useClass: HashLocationStrategy
    }],
    bootstrap: [ AppComponent ]
  })
  export class AppModule { }
  </code></pre>
  
  <p>My Login Page is which I have created files is under view folder.
  Path from <code>app</code>.</p>
  
  <p>views/pages/login.component.html
  views/pages/login.component.ts
  views/pages/login.module.ts</p>