title: Angular 2 rc.5 ORIGINAL EXCEPTION: No provider for FormBuilder
body: <p>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:</p>
  
  <p><strong>Errors</strong></p>
  
  <pre><code>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:
  </code></pre>
  
  <p><strong>Environment</strong></p>
  
  <ul>
  <li>Windows 10 Pro </li>
  <li>Node 6.5.0 </li>
  <li>angular-cli@1.0.0-beta.11-webpack.8</li>
  <li>typescript@2.1.0-dev.20160</li>
  <li>typings@1.3.3</li>
  </ul>
  
  <p><strong>Package.json</strong></p>
  
  <pre><code>    {
    "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"
    }
  }
  </code></pre>
  
  <p>app.module.ts</p>
  
  <pre><code>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 { }
  </code></pre>
  
  <p><strong>app.component.ts</strong></p>
  
  <pre><code>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&lt;any[]&gt;;
    constructor(af: AngularFire) {
      this.items = af.database.list('/items');
    }
  }
  </code></pre>
  
  <p><strong>app.routing.ts</strong></p>
  
  <pre><code>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);
  </code></pre>
  
  <p><strong>authentication.component.ts</strong></p>
  
  <pre><code>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],
      // });
    }
  
  }
  </code></pre>