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

app.module.ts

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule, HTTP_INTERCEPTORS } from "@angular/common/http";
import { provideHttpClient, withFetch, withInterceptorsFromDi } from "@angular/common/http";
import { ApiServiceService } from './api-service.service';
import { RouterModule } from "@angular/router";
import { AppComponent } from "./app.component";

@NgModule({
  declarations: [],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    RouterModule,
  ],
  providers: [
    provideHttpClient(withFetch(), withInterceptorsFromDi()),
    ApiServiceService
  ],
  bootstrap: [AppComponent, ReactiveFormsModule]
})
export class AppModule { }

form html:

<div class="mt-4 ml-4">
  <form [formGroup]="animalForm" id="animalForm">
    <div class="form-row">
      <div class="col">
        <label class="form-id-label" for="id">ID:</label>
        <input type="text" class="form-control" id="id" formControlName="id" autocomplete="off" />
      </div>
      <div class="col">
        <label class="form-name-label" for="name">Name:</label>
        <input type="text" class="form-control" id="name" formControlName="name" autocomplete="off" />
      </div>
      <div class="col">
        <label class="form-description-label" for="description">Derscription:</label>
        <input type="text" class="form-control" id="description" formControlName="description" autocomplete="off" />
      </div>

      <!-- Hidden input for created_At -->
      <input type="hidden" id="created_At" name="created_At" formControlName="created_At" />

      <!-- Hidden input for updated_At -->
      <input type="hidden" id="updated_At" name="updated_At" formControlName="updated_At" />

      <button (click)="animalSubmit()" type="submit" class="btn btn-primary mt-4 ml-2 mr-4">
        Create New Animal
      </button>

      <button (click)="updateAnimal()" type="submit" class="btn btn-success mt-4 ml-2 mr-4" *ngIf="getparamid">
        Update Animal
      </button>
    </div>
  </form>
</div>

component:

animalForm = new FormGroup({
    id: new FormControl('', Validators.required),
    name: new FormControl('', Validators.required),
    description: new FormControl('', Validators.required),
    created_At: new FormControl(new Date().toISOString()),
    updated_At: new FormControl(new Date().toISOString()),
  });

  animalSubmit() {
    console.log('COME ON HELL WHERE ARE YOU');
    console.log(this.animalForm.value);

    if (this.animalForm.value) {
      console.log(this.animalForm.value);
      const res = this.api.createAnimal(this.animalForm.value);
      console.log(res, 'Data Added Successfully');
      // this.animalForm.reset();
      // this.successMsg = res.message;
      // this.getAlldata();
    } else {
      this.errMsg = 'All Fields Are Required';
    }
  }

  updateAnimal() {
    console.log('update animal function in component??');
    console.log(this.animalForm.value);
    if (this.animalForm.value) {
      const res = this.api.updateData(this.animalForm.value, this.getparamid);
      console.log(res, 'Data Updated Successfully');
      // this.successMsg = res.message;
      // this.getAlldata();
    } else {
      this.errMsg = 'All Fields Are Required';
    }
  }
}

I saw a few other people use a function createGroup(), or other formats, they don’t work. A lot of the problem is people forgot to import the FormsModule and such, but I did. Still doesn’t work, am I just missing something? I am also using ng Build, not serve. It’s client sided. This code worked for my ng serve but I was asked to do it this way. So I restart everything and it still doesn’t love it.