title: Angular - No provider for FormBuilder
body: <p>I am using Angular 9.</p>
  <p>I am getting the following error:</p>
  <blockquote>
  <p>No provider for FormBuilder</p>
  </blockquote>
  <p>It has been reported in many cases, and the general solution appears to be to add the <code>FormsModule</code> to the <code>app.module.ts</code> file.</p>
  <p>e.g.</p>
  <pre><code>import { FormsModule } from '@angular/forms';
  
    imports: [
      FormsModule
  </code></pre>
  <p>I have tried this, but am still getting the error.</p>
  <blockquote>
  <pre><code>ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(AppModule)[FormBuilder -&gt; FormBuilder -&gt; FormBuilder]:
  
    NullInjectorError: No provider for FormBuilder!
  NullInjectorError: R3InjectorError(AppModule)[FormBuilder -&gt; FormBuilder -&gt; FormBuilder]: 
    NullInjectorError: No provider for FormBuilder!
  </code></pre>
  </blockquote>
  <p><strong>Question</strong></p>
  <p>Am I maybe doing something that's changed in Angular 9?  What do I need to do to fix this?</p>
  <p>My code:</p>
  <p><strong>login.component.ts</strong></p>
  <pre><code>import { Component, OnInit } from '@angular/core';
  import {Router} from '@angular/router';
  import { FormGroup, FormBuilder } from '@angular/forms';
  import { AuthService } from '../../services/auth.service';
  
  @Component({
    selector: 'app-login',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.css']
  })
  export class LoginComponent implements OnInit {
  
    loginForm: FormGroup;
  
    constructor(private authService: AuthService, private formBuilder: FormBuilder, private router: Router) {
    }
  
    ngOnInit(): void {
      this.loginForm = this.formBuilder.group({
        username: [''],
        password: ['']
      });
    }
  
    get f() { return this.loginForm.controls; }
  
    login() {
      this.authService.login(
        {
          username: this.f.username.value,
          password: this.f.password.value
        }
      )
      .subscribe(success =&gt; {
        if (success) {
          this.router.navigate(['/secret-random-number']);
        }
      });
    }
  
  }
  </code></pre>
  <p><strong>app.module.ts</strong></p>
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { HttpClientModule } from '@angular/common/http';
  
  import { AppRoutingModule } from './app-routing.module';
  import { AppComponent } from './app.component';
  import { LoginComponent } from './auth/containers/login/login.component';
  import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  import { FlexLayoutModule } from '@angular/flex-layout';
  import { MatFormFieldModule } from '@angular/material/form-field';
  import { MatInputModule } from '@angular/material/input';
  import { MatButtonModule } from '@angular/material/button';
  import { MatCardModule } from '@angular/material/card';
  import { MatToolbarModule } from '@angular/material/toolbar';
  import { FormsModule } from '@angular/forms';
  import { ApprovalListComponent } from './approval-list/component/approval-list.component';
  import { MatTableModule } from '@angular/material/table';
  import { MatPaginatorModule } from '@angular/material/paginator';
  import { MatSortModule } from '@angular/material/sort';
  import { MatTableExporterModule } from 'mat-table-exporter';
  
  @NgModule({
    declarations: [
      AppComponent,
      LoginComponent,
      ApprovalListComponent
    ],
    imports: [
      BrowserModule,
      AppRoutingModule,
      HttpClientModule,
      BrowserAnimationsModule,
      FlexLayoutModule,
      MatFormFieldModule,
      MatInputModule,
      MatButtonModule,
      MatCardModule,
      MatToolbarModule,
      FormsModule,
      MatTableModule,
      MatPaginatorModule,
      MatSortModule,
      MatTableExporterModule
    ],
    providers: [LoginComponent],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>