无法绑定到“formGroup”，因为它不是“form”的已知属性。 组件AppComponent的模板出现错误

Question

I have the following error in the latest version of Angular:

Can't bind to 'formGroup' since it isn't a known property of 'form'. Error occurs in the template of component AppComponent.

app.component.html

    <form [formGroup] = "personaForm" (ngSubmit) = "guardar()">
    <div class="form-group">
        <label>Nombre</label>
        <input type="text" formControlName="nombre" class="form-control" placeholder>
    </div>
</form>

<router-outlet></router-outlet>

app.component.ts

import { Component, OnInit, NgModule } from '@angular/core';
import { FormGroup, Validators, FormBuilder, ReactiveFormsModule } from '@angular/forms'
import { EstadosService } from './services/estados/estados.service'
import { PaisesService } from './services/paises/paises.service'
import { PersonaService } from './services/persona/persona.service'
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})

export class AppComponent implements OnInit {
  
  personaForm: FormGroup;

  constructor(
    public fb: FormBuilder,
    public estadosService: EstadosService,
    public paisesService: PaisesService,
    public personaService: PersonaService
    ) {

  }

  ngOnInit(): void {
    this.personaForm = this.fb.group({
      nombre: ["", Validators.required],
      apellido: ["", Validators.required],
      edad: ["", Validators.required],
      pais: ["", Validators.required],
      estado: ["", Validators.required],
    })
  }

  guardar(): void {}
}

the answers found on stackoverflow.com about including ReactiveFormsModule and NgModule do not work.

Answer 1

Sometimes they don't explain in forums where you should place or add the code. The solution was to look for the app.module.ts file

And perform the following imports: FormsModule, ReactiveFormsModule, BrowserAnimationsModule

I share the code:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    ReactiveFormsModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }