Köşeli 2 rc.5 ORİJİNAL ÖZGÜLLÜĞÜ: FormBuilder

Question

için sağlayıcınız yok Aşağıdakine göre Form Oluşturucu ile ilgili sorun yaşıyorum, sorun, fb: FormBuilder'i kimlik doğrulama bileşeninin yapıcısına koyduğum anda yapıcıda görünüyor

hatalar

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: 

Çevre: Ben aşağıdaki hataları olsun 10
• Windows 10 Pro
• 6.5.0
• angular-cli@1.0.0-beta.11-webpack.8 Düğüm
• 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

app.modules.ts dosyasında FormsModule yerine ReactiveFormsModule kullanmayı deneyin.

app.modules.ts

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

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

authentication.component.ts

REACTIVE_FORM_DIRECTIVES çıkarmadan deneyin:

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