title: Angular 6 form template error: 'There is no directive with "exportAs" set to "ngForm"'
body: <p>I have downloaded Angular 6 + bootstrap 4 free skin - <a href="https://startangular.com/product/sb-admin-bootstrap-4-angular-6/" rel="nofollow noreferrer">https://startangular.com/product/sb-admin-bootstrap-4-angular-6/</a>
  When trying to use 
  I continuously getting error: 
  There is no directive with "exportAs" set to "ngForm".</p>
  
  <p>My app.module.ts:</p>
  
  <pre><code> import {CommonModule} from '@angular/common';
      import {HTTP_INTERCEPTORS, HttpClient, HttpClientModule, HttpHeaders} from '@angular/common/http';
      import {NgModule} from '@angular/core';
      import {BrowserModule} from '@angular/platform-browser';
      import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
      import {TranslateLoader, TranslateModule} from '@ngx-translate/core';
      import {TranslateHttpLoader} from '@ngx-translate/http-loader';
  
      import {AppRoutingModule} from './app-routing.module';
      import {AppComponent} from './app.component';
      import {AuthGuard} from './shared';
      import {TokenInterceptor} from './shared/authtoken';
      import {AuthService} from './shared/services/auth/auth.service';
      import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
      import { FormsModule, ReactiveFormsModule } from '@angular/forms';
  
      // AoT requires an exported function for factories
      export const createTranslateLoader = (http: HttpClient) =&gt; {
          return new TranslateHttpLoader(http, './assets/i18n/', '.json');
      };
  
      @NgModule({
          imports: [
              CommonModule,
              BrowserModule,
              FormsModule,
              ReactiveFormsModule,
              BrowserAnimationsModule,
              HttpClientModule,
              TranslateModule.forRoot({
                  loader: {
                      provide: TranslateLoader,
                      useFactory: createTranslateLoader,
                      deps: [HttpClient]
                  }
              }),
              AppRoutingModule
          ],
          declarations: [AppComponent],
          providers: [
              AuthGuard,
              {
                  provide: HTTP_INTERCEPTORS,
                  useClass: TokenInterceptor,
                  multi: true
              },
              AuthService
          ],
          exports: [
              CommonModule,
              FormsModule,
              ReactiveFormsModule
          ],
          bootstrap: [AppComponent]
      })
      export class AppModule {
      }
  
      platformBrowserDynamic().bootstrapModule(AppModule);
  </code></pre>
  
  <p>My login.component.ts:</p>
  
  <pre><code>    import {Component, ElementRef, OnInit} from '@angular/core';
      import {Router} from '@angular/router';
      import {routerTransition} from '../router.animations';
      import {HttpClient} from '@angular/common/http';
      import {FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms';
  
      @Component({
          selector: 'app-login',
          templateUrl: './login.component.html',
          styleUrls: ['./login.component.scss'],
          animations: [routerTransition()]
      })
  
      export class LoginComponent implements OnInit {
  
          public myform: FormGroup;
          public username: FormControl;
          public password: FormControl;
  
          constructor(public router: Router, private httpClient: HttpClient,
          private formBuilder: FormBuilder) {
          }
  
          ngOnInit() {
              this.myform = this.formBuilder.group({
                  username: new FormControl('', [
                      Validators.minLength(4),
                      Validators.required
                  ]),
                  password: new FormControl('', [
                      Validators.minLength(4),
                      Validators.required
                  ])
              });
          }
  
          async onLoggedin(form: ElementRef) {
  
              console.log('Start login... ' + form);
          await this.httpClient.post&lt;AuthenticationResponse&gt;('http://127.0.0.1:51120/login',
              {'username': this.username.value, 'password': this.password.value})
              .toPromise().then(
                  data =&gt; {
                      console.log('Successfully logged in with user name: ', data.name);
                      localStorage.setItem('token', data.token);
                      localStorage.setItem('isLogin', 'true');
                  },
                  error =&gt; {
                      if (!error.ok) {
                          console.log('Error: ' + error.message);
                      } else {
                          console.log('Failed login message: ', error.error.message);
                      }
  
                      localStorage.removeItem('token');
                      localStorage.removeItem('isLogin');
                      this.router.navigate(['/login']);
                  });
  
          return false;
      }
  }
  
      interface AuthenticationResponse {
          status: string;
          code: string;
          message: string;
          id: number;
          token: string;
          username: string;
          role: string;
          name: string;
          companyName: string;
      }
  </code></pre>
  
  <p>My login.component.html:</p>
  
  <pre><code>&lt;div class="login-page" [@routerTransition]&gt;
      &lt;div class="row justify-content-md-center"&gt;
          &lt;div class="col-md-4"&gt;
              &lt;img src="assets/images/logo.png" width="150px" class="user-avatar" /&gt;
              &lt;h1&gt;&lt;h1&gt;Fish farms login&lt;/h1&gt;&lt;/h1&gt;
              &lt;form role="form" (ngSubmit)="onLoggedin(f)" #f="ngForm" novalidate&gt;
                  &lt;div class="form-content"&gt;
                      &lt;div class="form-group"&gt;
                          &lt;input type="text" id="username" name="username" class="form-control input-underline input-lg" required minlength="4" 
                     formControlName="username" placeholder="Username" ngModel&gt;
                          &lt;div class="form-group"&gt;
                              &lt;input type="password" id="password" name="password" class="form-control input-underline input-lg" required 
                         minlength="4" formControlName="password" placeholder="Password" ngModel&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;button type="submit" class="btn rounded-btn" [routerLink]="['/dashboard']"&gt;Log in&lt;/button&gt;
                      &lt;a class="btn rounded-btn" [routerLink]="['/signup']"&gt;Register&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/form&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>All over got replies asking to add to @NgModule({
      imports: [
          FormsModule,
          ReactiveFormsModule,</p>
  
  <p>But it does not work for me at all.
  Please advise</p>