Can't bind to 'formGroup' since it isn't a known property of 'form' in Angular

I am developing an Angular 10 application. I have several modules. There is a Shared Module, there I imported "FormsModule" and "ReactiveFormsModule". Now in my Setup Module I have a component. I am trying to develop a reactive form here. The component name is ExpenseHeadComponent. The code is below:

HTML Form:

<form [formGroup]="frmExpenseHead">    <div class="form-group row">      <label for="Code" class="col-sm-12 col-form-label">Code</label>      <div class="col-sm-10">        <input type="text" class="form-control" id="code" name="code" formControlName="code">      </div>        </div>  </form>  

TS file is:

import { Component, OnInit } from '@angular/core';  import { FormControl, FormGroup, Validators } from '@angular/forms';        @Component({    selector: 'app-expense-head',    templateUrl: './expense-head.component.html',    styleUrls: ['./expense-head.component.css']  })  export class ExpenseHeadComponent implements OnInit {    frmExpenseHead: FormGroup;        constructor() { }      ngOnInit() {      this.frmExpenseHead = new FormGroup({        code: new FormControl("", Validators.required),                });    }  }  

Setup Module

@NgModule({    imports: [      RouterModule.forChild(setupRoutes),      CommonModule,      SharedModuleModule,        ],    declarations: [      CompanyComponent,      IncomeHeadListComponent,      ExpenseHeadListComponent,      ExpenseHeadComponent,      IncomeHeadComponent,      MemberListComponent,      SetupModuleComponent    ]  })  export class SetupModuleModule { }  

Shared Module

@NgModule({    imports: [      RouterModule.forChild(sharedRoutes),      CommonModule,      FormsModule,      ReactiveFormsModule,      NgbModule,    ],    exports: [      HeaderComponent,      NavigationComponent,      NOFoundComponentComponent,      NavigateBackComponent,      ErrorPageComponent,    ],    declarations: [      HeaderComponent,      NavigationComponent,      NOFoundComponentComponent,      NavigateBackComponent,      ErrorPageComponent,      SharedModuleComponent    ]  })  export class SharedModuleModule { }  

Here it shows that, in Shared Module I have imported FormsModule, ReactiveFormsModule, and in Setup Module I have imported the shared module. But still I am getting the below error message:

ERROR in src/app/setup-module/pages/expense-head/expense-head.component.html:1:7

• error NG8002: Can't bind to 'formGroup' since it isn't a known property of 'form'.

  1 <form [formGroup]="frmExpenseHead"> ~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  src/app/setup-module/pages/expense-head/expense-head.component.ts:7:16    7   templateUrl: './expense-head.component.html',                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~    Error occurs in the template of component ExpenseHeadComponent.  

https://stackoverflow.com/questions/65536119/cant-bind-to-formgroup-since-it-isnt-a-known-property-of-form-in-angular January 02, 2021 at 12:55PM