title: Can not use ReactiveFormsModule
body: <p>I am trying to use <code>ReactiveFormsModule</code> in a project. So I added it to the <code>app.module.ts</code>:</p>
  
  <pre><code>import { NgModule }                                     from '@angular/core';
  import { FormsModule, ReactiveFormsModule }             from '@angular/forms';
  import { BrowserModule }                                from '@angular/platform-browser';
  import { LocationStrategy,
           HashLocationStrategy }                         from '@angular/common';
  
  import { AppComponent }                                 from './app.component';
  import { Ng2BootstrapModule }                           from 'ng2-bootstrap/ng2-bootstrap';
  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,
          FormsModule,
          ReactiveFormsModule,
          AppRoutingModule,
          Ng2BootstrapModule,
          ChartsModule,
  
      ],
      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>And this is my component:</p>
  
  <pre><code>import { Component, OnInit }    from '@angular/core';
  import { Validators, FormControl, FormGroup } from '@angular/forms';
  
  @Component({
      templateUrl: 'login.component.html'
  })
  export class LoginComponent implements OnInit {
      loginForm: FormGroup;
  
      constructor( ) {
          this.loginForm = new FormGroup({});
      }
  
      ngOnInit(): void {
  
      }
  }
  </code></pre>
  
  <p>My template:</p>
  
  <pre><code>&lt;div class="container d-table"&gt;
      &lt;div class="d-100vh-va-middle"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-md-8 offset-md-2"&gt;
                  &lt;div class="card-group"&gt;
                      &lt;div class="card p-2"&gt;
                          &lt;div class="card-block"&gt;
                              &lt;form [formGroup]="loginForm"&gt;
                                  &lt;h1&gt;Ingreso&lt;/h1&gt;
                                  &lt;p class="text-muted"&gt;Ingrese a su cuenta&lt;/p&gt;
                                  &lt;div class="input-group mb-1"&gt;
                                      &lt;span class="input-group-addon"&gt;&lt;i class="icon-user"&gt;&lt;/i&gt;
                                      &lt;/span&gt;
                                      &lt;input type="text" class="form-control" placeholder="Usuario"&gt;
                                  &lt;/div&gt;
                                  &lt;div class="input-group mb-2"&gt;
                                      &lt;span class="input-group-addon"&gt;&lt;i class="icon-lock"&gt;&lt;/i&gt;
                                      &lt;/span&gt;
                                      &lt;input type="password" class="form-control" placeholder="Contraseña"&gt;
                                  &lt;/div&gt;
                                  &lt;div class="row"&gt;
                                      &lt;div class="col-xs-6"&gt;
                                          &lt;button type="button" class="btn btn-primary px-2"&gt;Ingresar&lt;/button&gt;
                                      &lt;/div&gt;
                                      &lt;div class="col-xs-6 text-xs-right"&gt;
                                          &lt;button type="button" class="btn btn-link px-0"&gt;Olvidó su contraseña?&lt;/button&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/form&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the <code>login.module.ts</code>:</p>
  
  <pre><code>import { NgModule }                 from '@angular/core';
  
  import { LoginComponent }       from './login.component';
  import { LoginRoutingModule }   from './login-routing.module';
  
  @NgModule({
      imports: [
          LoginRoutingModule
      ],
      declarations: [ LoginComponent ]
  })
  export class LoginModule { }
  </code></pre>
  
  <p>But I get the well known:</p>
  
  <blockquote>
    <p>Can't bind to 'formGroup' since it isn't a known property of 'form'</p>
  </blockquote>
  
  <p>It is supposed to appear when <code>ReactiveFormsModule</code> is not included in the <code>app.module</code>, but as you can see, it is imported. How can I solve it?</p>