core. js: 8061 Невозможно выполнить привязку к 'formGroup', так как это не известное свойство 'form'. в желтом google chrome

Question

У меня есть angular 8 приложение и я пытаюсь получить значения из формы:

Итак, это шаблон:

<div class="row">
  <div class="col-xs-12">
    <form [formGroup]="recipeForm" (ngSubmit)="onSubmit()">
      <div class="row">
        <div class="col-xs-12">
          <button
            type="submit"
            class="btn btn-success"
            [disabled]="!recipeForm.valid">Save</button>
          <button type="button" class="btn btn-danger">Cancel</button>
        </div>
      </div>
      <div class="row">
        <div class="col-xs-12">
          <div class="form-group">
            <label for="name">Name</label>
            <input
              type="text"
              id="name"
              formControlName="name"
              class="form-control">
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-xs-12">
          <div class="form-group">
            <label for="imagePath">Image URL</label>
            <input
              type="text"
              id="imagePath"
              formControlName ="imagePath"
              class="form-control"
             >
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-xs-12">
          <div class="form-group">
            <label for="description">Description</label>
            <textarea
              type="text"
              id="description"
              class="form-control"
              formControlName="description"
              rows="6"></textarea>
          </div>
        </div>
      </div>     
    </form>
  </div>
</div>

, а это файл ts:

export class RecipeEditComponent implements OnInit {
  id:number;
  editMode = false;
  recipeForm: FormGroup;


  constructor(private recipeService: RecipeService,  private route: ActivatedRoute) { }

  ngOnInit() {
    this.route.params.subscribe((params: Params) =>{
      this.id = +params['id'];
      this.editMode = +params['id'] != null;

      //this.editMode = true;

      this.initForm();
    })
  }

 private initForm(){

    let recipeName = '';
    let recipeDescription = '';
    let recipeImagePath = '';

    if(this.editMode) {
      const recipe = this.recipeService.getRecip(this.id);
      recipeName = recipe.name;
      recipeImagePath = recipe.imagePath;
      recipeDescription = recipe.description;
    }

    this.recipeForm = new FormGroup({
      'name': new FormControl(recipeName),
      'imagePath': new FormControl(recipeImagePath),
      'description': new FormControl(recipeDescription)
    });

  }

  onSubmit(){
    console.log(this.recipeForm.value);

  }

}

но при загрузке шаблона я получаю эту ошибку: в желтом в Google chrome. Так что не красный. Поскольку он компилируется

core.js:8061 Can't bind to 'formGroup' since it isn't a known property of 'form'.

И да, я поместил ReactiveFormsModule в app.module.ts.

ТАК, я много раз проверял, может быть, ошибка имени. Но я ничего не могу найти, что не так?

Так что я не понимаю этого.

Спасибо

Что я сказал ранее. У меня есть это в моем app.module.ts:

imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    AppRoutingModule,
  ],

Это у меня в app.module.ts:

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    RecipesComponent,
    RecipeListComponent,
    RecipeDetailComponent,
    RecipeItemComponent,
    ShoppingListComponent,
    ShoppingEditComponent,
    DropdownDirective
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    AppRoutingModule,
  ],
  providers: [ShoppingListService, RecipeService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

RecipeEditComponent пришлось поместить в app.module