Property 'controls' does not exist on type 'AbstractControl' in angular

Question

I can't seem to understand why I get this error in my angular app, I will now paste my html and ts files.

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

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

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

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

  private initForm(){
    
    let recipeName = '';
    let recipeImagePath = '';
    let recipeDescription = '';
    let recipeIngredients = new FormArray([]);

    if (this.editMode){
      const recipe = this.recipeService.getRecipe(this.id);
      recipeName = recipe.name;
      recipeImagePath = recipe.imagePath;
      recipeDescription = recipe.description;
      if (recipe['ingredients']) {
        for (let ingredient of recipe.ingredients){
          recipeIngredients.push(
            new FormGroup({
              'name': new FormControl(ingredient.name),
              'amount': new FormControl(ingredient.amount)
            })
          )
        }
      }
    }

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

}

and the html file

<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">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">ImageURL</label>
                        <input type="text"
                        id="imagePath"
                        formControlName="imagePath"
                        class="form-control">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <img src="" alt="" class="img-responsive">
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <div class="form-group">
                        <label for="description">Description</label>
                        <textarea type="text"
                        id="description"
                        formControlName="description"
                        class="form-control"
                        rows="6">
                        </textarea>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12" formArrayName="ingredients">
                    <div class="row mt-2"
                    *ngFor="let ingredientCtrl of recipeForm.get('ingredients').controls; let i = index"
                      [formGroupName]="i">
                        <div class="col-xs-8">
                            <input type="text" class="form-control" formControlName="name">
                        </div>
                        <div class="col-xs-2">
                            <input type="number" class="form-control" formControlName="amount">
                        </div>
                        <div class="col-xs-2">
                            <button class="btn btn-danger">X</button>
                        </div>
                    </div>                    
                </div>
            </div>
        </form>
    </div>
</div>

these are the two error messages i get error TS2339: Property 'controls' does not exist on type 'AbstractControl'. error TS2531: Object is possibly 'null'. I am following a course online and this code works for the coursemaker, I do not know how to fix it, probably something is changed in angular