Angular 2 rc.5 ORIGINAL EXCEPTION: No provider for FormBuilder

Question

I am having problems with the Form Builder as per below, the problem appears to be with the constructor as soon as I put fb: FormBuilder into the constructor of the authentication component I get the following errors:

Errors

EXCEPTION: Error: Uncaught (in promise): EXCEPTION: Error in ./AuthenticationComponent class AuthenticationComponent_Host - inline template:0:0
ORIGINAL EXCEPTION: No provider for FormBuilder!
ORIGINAL STACKTRACE:
Error: DI Exception
    at NoProviderError.BaseException [as constructor] (http://localhost:4200/main.bundle.js:2013:23)
    at NoProviderError.AbstractProviderError [as constructor] (http://localhost:4200/main.bundle.js:32250:16)
    at new NoProviderError (http://localhost:4200/main.bundle.js:32287:16)
    at ReflectiveInjector_._throwOrNull (http://localhost:4200/main.bundle.js:62666:19)
    at ReflectiveInjector_._getByKeyDefault (http://localhost:4200/main.bundle.js:62694:25)
    at ReflectiveInjector_._getByKey (http://localhost:4200/main.bundle.js:62657:25)
    at ReflectiveInjector_.get (http://localhost:4200/main.bundle.js:62466:21)
    at NgModuleInjector.get (http://localhost:4200/main.bundle.js:45719:52)
    at ElementInjector.get (http://localhost:4200/main.bundle.js:62827:48)
    at ElementInjector.get (http://localhost:4200/main.bundle.js:62827:48)
ERROR CONTEXT:

Environment

• Windows 10 Pro
• Node 6.5.0
• [email protected]
• [email protected]
• [email protected]

Package.json

    {
  "name": "mojito",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "start": "ng serve",
    "lint": "tslint \"src/**/*.ts\"",
    "test": "ng test",
    "pree2e": "webdriver-manager update",
    "e2e": "protractor"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "2.0.0-rc.5",
    "@angular/compiler": "2.0.0-rc.5",
    "@angular/core": "2.0.0-rc.5",
    "@angular/forms": "0.3.0",
    "@angular/http": "2.0.0-rc.5",
    "@angular/platform-browser": "2.0.0-rc.5",
    "@angular/platform-browser-dynamic": "2.0.0-rc.5",
    "@angular/router": "3.0.0-rc.1",
    "angularfire2": "^2.0.0-beta.4",
    "core-js": "^2.4.0",
    "firebase": "^3.3.1",
    "rxjs": "5.0.0-beta.11",
    "ts-helpers": "^1.1.1",
    "zone.js": "0.6.12"
  },
  "devDependencies": {
    "@types/jasmine": "^2.2.30",
    "angular-cli": "1.0.0-beta.11-webpack.8",
    "codelyzer": "~0.0.26",
    "jasmine-core": "2.4.1",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "0.13.22",
    "karma-chrome-launcher": "0.2.3",
    "karma-jasmine": "0.3.8",
    "karma-remap-istanbul": "^0.2.1",
    "protractor": "4.0.3",
    "ts-node": "1.2.1",
    "tslint": "3.13.0",
    "typescript": "2.0.0"
  }
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { routing } from "./app.routing";
import { AngularFireModule } from 'angularfire2';
import * as firebase from 'firebase';
import { AuthenticationComponent } from './authentication/authentication.component';
import { CustomerComponent } from './customer/customer.component';
import { CustomerListComponent } from './customer/customer-list/customer-list.component';
import { CustomerItemComponent } from './customer/customer-list/customer-item.component';
import { HeaderComponent } from './header/header.component';
import { HomeComponent } from './home/home.component';
import { RegistrationComponent } from './registration/registration.component';
import { AuthGuard } from "./shared/auth.guard";
import { AuthService } from "./shared/auth.service";

const firebaseConfig = {
    apiKey: "",
    authDomain: "",
    databaseURL: "",
    storageBucket: ""
}

@NgModule({
  declarations: [
    AppComponent,
    AuthenticationComponent,
    CustomerComponent,
    CustomerListComponent,
    CustomerItemComponent,
    CustomerItemComponent,
    HeaderComponent,
    HomeComponent,
    RegistrationComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    AngularFireModule.initializeApp(firebaseConfig),
    routing
  ],
  providers: [AuthGuard,AuthService],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

import { Component } from '@angular/core';

import { AngularFire, FirebaseListObservable } from 'angularfire2';

import { HeaderComponent } from "./header/header.component";

@Component({
  selector: 'mj-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app works!';
  items: FirebaseListObservable<any[]>;
  constructor(af: AngularFire) {
    this.items = af.database.list('/items');
  }
}

app.routing.ts

import { RouterModule, Routes } from "@angular/router";

import { HomeComponent } from "./home/home.component";
import { RegistrationComponent } from "./registration/registration.component";

import { AuthenticationComponent } from "./authentication/authentication.component";
import { CustomerComponent } from "./customer/customer.component";
import { CustomerListComponent } from "./customer/customer-list/customer-list.component";
import { AuthGuard } from "./shared/auth.guard";

const APP_ROUTES: Routes = [
    {path: '', redirectTo: '/home', pathMatch: 'full'},
    {path: 'signup', component: RegistrationComponent},
    {path: 'home', component: HomeComponent},
    {path: 'signin', component: AuthenticationComponent},
    {path: 'customer', component: CustomerComponent, canActivate: [AuthGuard]},
    {path: 'customer-list', component: CustomerListComponent, canActivate: [AuthGuard]},
    {path: 'customer', component: CustomerComponent, canActivate: [AuthGuard]}
];

export const routing = RouterModule.forRoot(APP_ROUTES);

authentication.component.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators, REACTIVE_FORM_DIRECTIVES } from "@angular/forms";

import { AuthService } from "../shared/auth.service";

@Component({
  selector: 'mj-authentication',
  templateUrl: './authentication.component.html',
  styleUrls: ['./authentication.component.css']
})
export class AuthenticationComponent implements OnInit {

  // myForm: FormGroup;
  // error = false;
  // errorMessage = '';

  constructor(private fb: FormBuilder, private authService: AuthService) { }

  // onSignin() {
  //   // this.authService.signinUser(this.myForm.value);
  // }

  ngOnInit(): any {
    // this.myForm = this.fb.group({
    //   email: ['', Validators.required],
    //   password: ['', Validators.required],
    // });
  }

}

Answer 1

in app.modules.ts file try using ReactiveFormsModule instead of FormsModule.

app.modules.ts

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

imports: [
    ReactiveFormsModule //<--add this instead of FormsModule
  ]

authentication.component.ts

try removing REACTIVE_FORM_DIRECTIVES:

import { FormBuilder, FormGroup, Validators} from "@angular/forms";