I encountered an issue while setting up reactive forms in my Angular 9 code environment. The error message reads:
error NG8002: Can't bind to 'formGroup' since it isn't a known property of 'form'.
After researching on Google and StackOverflow, I couldn't find similar questions related to Angular 9. However, based on suggestions from other posts, I have imported ReactiveFormsModule into app.module.ts, routing.module.ts, and recipe-edit.component.spec.ts files. Despite this, the error persists. Below is the code snippet for reference, could someone provide guidance?
app.module.ts
import { RecipeService } from './recipes/recipe.service';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule} from '@angular/forms';
import { RoutingModule } from './routing.module';
import { ShoppingListService } from './shopping-list/shopping-list.service';
import { AppComponent } from './app.component';
import { RecipesComponent } from './recipes/recipes.component';
import { RecipeListComponent } from './recipes/recipe-list/recipe-list.component';
...
routing.module.ts
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { RecipeStartComponent } from './recipes/recipe-start/recipe-start.component';
import { RecipeDetailComponent } from './recipes/recipe-detail/recipe-detail.component';
...
recipe-edit.component.ts
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Params } from '@angular/router';
import { FormGroup, FormControl } from '@angular/forms';
...
recipe-edit.component.html
<div class="row">
...
</code></pre>
<p>recipe-edit.component.spec.ts</p>
<pre><code>import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { RecipeEditComponent } from './recipe-edit.component';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
...