I have declared ReactiveFormsModule in my app.module.ts like so:

app.module.ts

import { HttpClientModule } from '@angular/common/http';
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule, FormControl, FormGroup, FormBuilder } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AllocationFormComponent } from './allocation-form/allocation-form.component';
import { AppHeaderComponent } from './app-header/app-header.component';
import { AllocationHistoryComponent } from './allocation-history/allocation-history.component';
import { AppHomeComponent } from './app-home/app-home.component';
import { AppNavigationComponent } from './app-navigation/app-navigation.component';
import { AllocationOptInComponent } from './allocation-opt-in/allocation-opt-in.component';
import { AllocationOptOutComponent } from './allocation-opt-out/allocation-opt-out.component';
import { AllocationResponseComponent } from './allocation-response/allocation-response.component';

@NgModule({
  declarations: [
    AppComponent,
    AllocationFormComponent,
    AppHeaderComponent,
    AllocationHistoryComponent,
    AppHomeComponent,
    AppNavigationComponent,
    AllocationOptInComponent,
    AllocationOptOutComponent,
    AllocationResponseComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    AppRoutingModule,
    FormsModule,
    ReactiveFormsModule,
    FormControl,
    FormGroup,
    FormBuilder,
    CommonModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

My component is tied to an app router. The component files look like this…

allocation-form.component.ts

import { Component } from '@angular/core';
import { NgFor } from '@angular/common';
import { PotentialInvestment } from '../models/potentialInvestment.model';
import { FormsModule, ReactiveFormsModule, FormGroup, FormControl, FormBuilder } from '@angular/forms';

@Component({
  selector: 'app-allocation-form',
  templateUrl: './allocation-form.component.html',
  styleUrl: './allocation-form.component.scss'
})
export class AllocationFormComponent {
  //Form Controls
  //onSubmit(allocationsSelectionForm: NgForm) {
  //  const bypassDecision = allocationsSelectionForm.form.value.rdoBypassAllocation;
  //  const regularDecision = allocationsSelectionForm.form.value.rdoRegularAllocation;

  //  console.log(bypassDecision, regularDecision);
  allocationsSelectionForm = new FormGroup({
    rdoBypassAllocation: new FormControl(''),
  });
  //}
  //END OF: Form Controls


  //Visibility Cascading Tree
  blockTwoVisibility = false;
  bypassRotationCommentsVisibility = false;
  blockThreeVisibility = false;

  Visibility(blockName: string) {
    if (blockName == "blockTwo") {
      this.blockTwoVisibility = this.blockTwoVisibility = true;
    }
    else if (blockName == "bypassRotationComments") {
      this.bypassRotationCommentsVisibility = this.bypassRotationCommentsVisibility = true;
    }
    else if (blockName == "blockThree") {
      this.blockThreeVisibility = this.blockThreeVisibility = true;
    }
    else if (blockName == "submit") {
      this.blockTwoVisibility = this.blockTwoVisibility = false;
      this.blockThreeVisibility = this.blockThreeVisibility = false;
      this.bypassRotationCommentsVisibility = this.bypassRotationCommentsVisibility = false;
      //Submit payload to backend - Call another TypeScript method here

    }
  }
}

allocation-form.component.html

<form [formGroup]="allocationsSelectionForm">
    <!-- Block 1 -->
    <div class="centerWithBorder">
      <p>How are you submitting your Potential Investment for allocation?</p>
      <table>
        <tr>
          <td>
            <button class="affiniusButton" (click)="Visibility('blockTwo')">Manual Entry</button>
          </td>
        </tr>
        <!-- This will occur in phase #2 -->
        <!--<tr>
          <td>
            <input type="button" id="btnAPIEntry" class="button" disabled="disabled" value="Pipeline Entry (Disabled)" />
          </td>
        </tr>-->
      </table>
    </div>
    <!-- Block 2 -->
    <div class="centerWithBorder" *ngIf="blockTwoVisibility">
      <p>Does the Potential Investment need to bypass rotation?</p>
      <div class="form-wrapper">
        <div class="form-row">
          <label>Bypass Allocation: </label>
          <input id="rdoBypassAllocation" formControlName="rdoBypassAllocation" type="radio" value="Bypass Allocation" (click)="Visibility('bypassRotationComments')" ngModel  />
        </div>
        <div class="form-row">
          <label>Regular Allocation: </label>
          <input id="rdoRegularAllocation" name="rdoRegularAllocation" type="radio" value="Regular Allocation" (click)="Visibility('blockThree')" ngModel />
        </div>
      </div>
      <div class="centerWithoutBorderOutline" *ngIf="bypassRotationCommentsVisibility">
        <div class="form-wrapper">
          <!--<div class="form-row">-->
          <label for="bypassAllocationComments">Bypass Allocation Reason:</label>
          <textarea id="bypassAllocationComments" name="bypassAllocationComments" rows="4" cols="200" onfocus="this.value=''">Provide detailed comments for Fund Managers to review.</textarea>
        </div>
        <div>
          <table>
            <tr>
              <td>
                <button class="affiniusButton" (click)="Visibility('blockThree')">Add Allocation for Bypass</button>
              </td>
            </tr>
          </table>
        </div>
      </div>
    </div>
</form>

When trying to run the app, I am getting this error message.

Application bundle generation failed. [1.545 seconds]

X [ERROR] NG8002: Can't bind to 'formGroup' since it isn't a known property of 'form'. [plugin angular-compiler]

    src/app/allocation-form/allocation-form.component.html:1:6:
      1 │ <form [formGroup]="allocationsSelectionForm">
        ╵       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  Error occurs in the template of component AllocationFormComponent.

    src/app/allocation-form/allocation-form.component.ts:8:15:
      8 │   templateUrl: './allocation-form.component.html',
        ╵                ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


X [ERROR] NG8001: 'app-app-navigation' is not a known element:
1. If 'app-app-navigation' is an Angular component, then verify that it is part of this module.
2. If 'app-app-navigation' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. [plugin angular-compiler]

    src/app/app.component.html:0:0:
      0 │
        ╵ ^

  Error occurs in the template of component AppComponent.

    src/app/app.component.ts:9:15:
      9 │   templateUrl: './app.component.html',
        ╵                ~~~~~~~~~~~~~~~~~~~~~~


X [ERROR] NG8001: 'app-app-header' is not a known element:
1. If 'app-app-header' is an Angular component, then verify that it is part of this module.
2. If 'app-app-header' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. [plugin angular-compiler]

    src/app/app.component.html:2:0:
      2 │ <app-app-header></app-app-header>
        ╵ ~~~~~~~~~~~~~~~~

  Error occurs in the template of component AppComponent.

    src/app/app.component.ts:9:15:
      9 │   templateUrl: './app.component.html',
        ╵                ~~~~~~~~~~~~~~~~~~~~~~


X [ERROR] NG8001: 'router-outlet' is not a known element:
1. If 'router-outlet' is an Angular component, then verify that it is part of this module.
2. If 'router-outlet' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. [plugin angular-compiler]

    src/app/app.component.html:3:0:
      3 │ <router-outlet></router-outlet>
        ╵ ~~~~~~~~~~~~~~~

  Error occurs in the template of component AppComponent.

    src/app/app.component.ts:9:15:
      9 │   templateUrl: './app.component.html',
        ╵                ~~~~~~~~~~~~~~~~~~~~~~


Watch mode enabled. Watching for file changes...

From my own troubleshooting, I have found that

X [ERROR] NG8002: Can't bind to 'formGroup' since it isn't a known property of 'form'. [plugin angular-compiler]

Is almost always caused by the app not importing the ReactiveFormsModule into the app.module.ts. I am doing this, and then importing it on my component’s .ts file as showcased above.

Additionally, if I do a template driven form, I do not encounter any errors, it is only when I work with a Reactive angular form.