Failed: Template parse errors: There is no directive with "exportAs" set to "ngForm" Angular 6

Question

can you please help me, i know you maybe faced this error multiple time but i do all what i have to do but in vain ! so this is my form :

<div class="row">
  <h1>Ajouter métier</h1>
  <div class="col-sm-8 col-sm-offset-2">
  <form (ngSubmit)="onSubmit(f)" #f="ngForm" >
    <div class="form-group">
      <label for="name">
        Intitulé de métier
      </label>
      <input type="text" id="name" class="form-control" name="name" #name="ngModel" ngModel required>
    </div>
    <button class="btn btn-primary" type="submit" [disabled]="f.invalid">Valider</button>
  </form>
  </div>
</div>

My module.ts :

@NgModule({
  declarations: [
    AppComponent,
    ListMetierComponent,
    AddMetierComponent
  ],
  imports: [
    // NgbModule.forRoot(),
    NgBoostedModule,
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    RouterModule.forRoot(appRoutes)
  ],
  providers: [
    MetierService,
    HttpClientModule,
    HttpClient
  ],
  bootstrap: [AppComponent]
})

and to test my code with jasmine/karma i got all the time this error !!

Failed: Template parse errors:
There is no directive with "exportAs" set to "ngForm" ("  <h1>Ajouter métier</h1>
  <div class="col-sm-8 col-sm-offset-2">
  <form (ngSubmit)="onSubmit(f)" [ERROR ->]#f="ngForm" >
    <div class="form-group">
      <label for="name">
"): ng:///DynamicTestModule/AddMetierComponent.html@3:33
There is no directive with "exportAs" set to "ngModel" ("titulé de métier
      </label>
      <input type="text" id="name" class="form-control" name="name" [ERROR ->]#name="ngModel" ngModel required>
    </div>
    <button class="btn btn-primary" type="submit" [disab"): ng:///DynamicTestModule/AddMetierComponent.html@8:68

thanks a lot