title: Can't bind to 'formGroup' since it isn't a known property of 'form' in Angular 11
body: <p>I am trying to implement angular reactive forms in my angular 11 application and currently getting the error Can't bind to 'formGroup' since it isn't a known property of 'form' in my html</p>
  <p>I have created a customermodule and referencing  ReactiveFormsModule. I am not sure why its still giving this error.</p>
  <p>Customer module</p>
  <pre><code> import { NgModule } from '@angular/core';
  import { SharedModule } from 'src/app/shared/shared.module';
  
  import { CustomerComponent } from '../customer/customer.component';
  
  
  
  @NgModule({
    declarations: [CustomerComponent],
    imports: [
      SharedModule
  
    ],
    exports: [CustomerComponent]
  })
  export class CustomerModule { }
  </code></pre>
  <p>Customer component</p>
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { FormGroup, FormControl } from '@angular/forms';
  import { Customer } from '../../models/customer';
  
  
  @Component({
    selector: 'app-customer',
    templateUrl: './customer.component.html',
    styleUrls: ['./customer.component.scss']
  })
  
  export class CustomerComponent implements OnInit {
    customerForm: FormGroup;
    customer = new Customer()
  
    constructor() { }
  
    ngOnInit(): void {
  
      this.customerForm = new FormGroup({
        firstName: new FormControl(),
        lastName: new FormControl(),
        email: new FormControl(),
        sendCatalog: new FormControl(true)
      });
  
    }
  
    save() {
  
    }
  
  }
  </code></pre>
  <p>Customer html</p>
  <pre><code>&lt;div class=&quot;card-body&quot;&gt;
    &lt;form novalidate (ngSubmit)=&quot;save()&quot; [formGroup]=&quot;customerForm&quot;&gt;
  
      &lt;section class=&quot;flex-group&quot;&gt;
  
        &lt;div class=&quot;field&quot;&gt;
          &lt;label&gt;First Name&lt;/label&gt;
          &lt;input type=&quot;text&quot; /&gt;
        &lt;/div&gt;
  
        &lt;div class=&quot;field&quot;&gt;
          &lt;label&gt;Last Name&lt;/label&gt;
          &lt;input type=&quot;text&quot; /&gt;
        &lt;/div&gt;
  
        &lt;div class=&quot;field&quot;&gt;
          &lt;label&gt;Email&lt;/label&gt;
          &lt;input type=&quot;text&quot; /&gt;
        &lt;/div&gt;
  
        &lt;div class=&quot;field&quot;&gt;
          &lt;button type=&quot;button&quot;&gt;Submit&lt;/button&gt;
        &lt;/div&gt;
  
      &lt;/section&gt;
  
  
    &lt;/form&gt;
  </code></pre>
  <p>App Module</p>
  <pre><code> import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import {SharedModule } from './shared/shared.module'
  import { AppRoutingModule } from './app-routing.module';
  import { AppComponent } from './app.component';
  import { CustomerModule } from './components/customer/customer.module'
  import { AnimationsModule, ElementsModule, LayoutModule, PatternsModule, WidgetsModule } from '@angloamerican/components';
  
  @NgModule({
    declarations: [
      AppComponent
    ],
    imports: [
      SharedModule,
      CustomerModule,
      BrowserModule,
      AppRoutingModule,
      AnimationsModule,
      ElementsModule,
      LayoutModule,
      PatternsModule,
      WidgetsModule
    ],
    providers: [],
  
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  <p>App component</p>
  <pre><code>import { Component } from '@angular/core';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
  })
  export class AppComponent {
    title = 'AngularReactiveFormsDemo';
  }
  </code></pre>
  <p>App html</p>
  <pre><code>&lt;app-customer&gt;&lt;/app-customer&gt;
  </code></pre>