Góc 2 rc.5 Ngoại lệ ban đầu: Không có nhà cung cấp nào cho FormBuilder

Question

Tôi đang gặp sự cố với Trình tạo biểu mẫu như bên dưới, sự cố có vẻ như với hàm tạo ngay khi tôi đặt fb: FormBuilder vào hàm tạo của thành phần xác thực tôi nhận được các lỗi sau đây:

lỗi

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: 

Môi trường

• Windows 10 Pro
• Node 6.5.0
• angular-cli@1.0.0-beta.11-webpack.8
• typescript@2.1.0-dev.20160
• typings@1.3.3

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

trong tệp app.modules.ts thử sử dụng ReactiveFormsModule thay vì FormsModule.

app.modules.ts

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

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

authentication.component.ts

cố gắng loại bỏ REACTIVE_FORM_DIRECTIVES:

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