没有提供角度2的角火

Question

尝试实施登录时，我不断收到以下错误：

browser_adapter.ts:82EXCEPTION: Error in http://localhost:4200/app/app.component.js class AppComponent_Host - inline template:0:0BrowserDomAdapter.logError @ browser_adapter.ts:82BrowserDomAdapter.logGroup @ browser_adapter.ts:93ExceptionHandler.call @ exception_handler.ts:58(anonymous function) @ application_ref.ts:289ZoneDelegate.invoke @ zone.js:323onInvoke @ ng_zone_impl.ts:72ZoneDelegate.invoke @ zone.js:322Zone.run @ zone.js:216(anonymous function) @ zone.js:571ZoneDelegate.invokeTask @ zone.js:356onInvokeTask @ ng_zone_impl.ts:61ZoneDelegate.invokeTask @ zone.js:355Zone.runTask @ zone.js:256drainMicroTaskQueue @ zone.js:474ZoneTask.invoke @ zone.js:426
browser_adapter.ts:82ORIGINAL EXCEPTION: No provider for AngularFire!BrowserDomAdapter.logError @ browser_adapter.ts:82ExceptionHandler.call @ exception_handler.ts:70(anonymous function) @ application_ref.ts:289ZoneDelegate.invoke @ zone.js:323onInvoke @ ng_zone_impl.ts:72ZoneDelegate.invoke @ zone.js:322Zone.run @ zone.js:216(anonymous function) @ zone.js:571ZoneDelegate.invokeTask @ zone.js:356onInvokeTask @ ng_zone_impl.ts:61ZoneDelegate.invokeTask @ zone.js:355Zone.runTask @ zone.js:256drainMicroTaskQueue @ zone.js:474ZoneTask.invoke @ zone.js:426
browser_adapter.ts:82ORIGINAL STACKTRACE:BrowserDomAdapter.logError @ browser_adapter.ts:82ExceptionHandler.call @ exception_handler.ts:74(anonymous function) @ application_ref.ts:289ZoneDelegate.invoke @ zone.js:323onInvoke @ ng_zone_impl.ts:72ZoneDelegate.invoke @ zone.js:322Zone.run @ zone.js:216(anonymous function) @ zone.js:571ZoneDelegate.invokeTask @ zone.js:356onInvokeTask @ ng_zone_impl.ts:61ZoneDelegate.invokeTask @ zone.js:355Zone.runTask @ zone.js:256drainMicroTaskQueue @ zone.js:474ZoneTask.invoke @ zone.js:426
browser_adapter.ts:82Error: DI Exception
    at NoProviderError.BaseException [as constructor] (exceptions.ts:21)
    at NoProviderError.AbstractProviderError [as constructor] (reflective_exceptions.ts:59)
    at new NoProviderError (reflective_exceptions.ts:92)
    at ReflectiveInjector_._throwOrNull (reflective_injector.ts:849)
    at ReflectiveInjector_._getByKeyDefault (reflective_injector.ts:878)
    at ReflectiveInjector_._getByKey (reflective_injector.ts:840)
    at ReflectiveInjector_.get (reflective_injector.ts:633)
    at NgModuleInjector.get (ng_module_factory.ts:99)
    at DebugAppView._View_AppComponent_Host0.createInternal (AppComponent.ngfactory.js:16)
    at DebugAppView.AppView.create (view.ts:112)BrowserDomAdapter.logError @ browser_adapter.ts:82ExceptionHandler.call @ exception_handler.ts:75(anonymous function) @ application_ref.ts:289ZoneDelegate.invoke @ zone.js:323onInvoke @ ng_zone_impl.ts:72ZoneDelegate.invoke @ zone.js:322Zone.run @ zone.js:216(anonymous function) @ zone.js:571ZoneDelegate.invokeTask @ zone.js:356onInvokeTask @ ng_zone_impl.ts:61ZoneDelegate.invokeTask @ zone.js:355Zone.runTask @ zone.js:256drainMicroTaskQueue @ zone.js:474ZoneTask.invoke @ zone.js:426
browser_adapter.ts:82ERROR CONTEXT:BrowserDomAdapter.logError @ browser_adapter.ts:82ExceptionHandler.call @ exception_handler.ts:79(anonymous function) @ application_ref.ts:289ZoneDelegate.invoke @ zone.js:323onInvoke @ ng_zone_impl.ts:72ZoneDelegate.invoke @ zone.js:322Zone.run @ zone.js:216(anonymous function) @ zone.js:571ZoneDelegate.invokeTask @ zone.js:356onInvokeTask @ ng_zone_impl.ts:61ZoneDelegate.invokeTask @ zone.js:355Zone.runTask @ zone.js:256drainMicroTaskQueue @ zone.js:474ZoneTask.invoke @ zone.js:426
browser_adapter.ts:82DebugContext {_view: _View_AppComponent_Host0, _nodeIndex: 0, _tplRow: 0, _tplCol: 0}BrowserDomAdapter.logError @ browser_adapter.ts:82ExceptionHandler.call @ exception_handler.ts:80(anonymous function) @ application_ref.ts:289ZoneDelegate.invoke @ zone.js:323onInvoke @ ng_zone_impl.ts:72ZoneDelegate.invoke @ zone.js:322Zone.run @ zone.js:216(anonymous function) @ zone.js:571ZoneDelegate.invokeTask @ zone.js:356onInvokeTask @ ng_zone_impl.ts:61ZoneDelegate.invokeTask @ zone.js:355Zone.runTask @ zone.js:256drainMicroTaskQueue @ zone.js:474ZoneTask.invoke @ zone.js:426
zone.js:461 Unhandled Promise rejection: EXCEPTION: Error in http://localhost:4200/app/app.component.js class AppComponent_Host - inline template:0:0
ORIGINAL EXCEPTION: No provider for AngularFire!
ORIGINAL STACKTRACE:
Error: DI Exception
    at NoProviderError.BaseException [as constructor] (http://localhost:4200/vendor/@angular/core/src/facade/exceptions.js:27:23)
    at NoProviderError.AbstractProviderError [as constructor] (http://localhost:4200/vendor/@angular/core/src/di/reflective_exceptions.js:43:16)
    at new NoProviderError (http://localhost:4200/vendor/@angular/core/src/di/reflective_exceptions.js:80:16)
    at ReflectiveInjector_._throwOrNull (http://localhost:4200/vendor/@angular/core/src/di/reflective_injector.js:786:19)
    at ReflectiveInjector_._getByKeyDefault (http://localhost:4200/vendor/@angular/core/src/di/reflective_injector.js:814:25)
    at ReflectiveInjector_._getByKey (http://localhost:4200/vendor/@angular/core/src/di/reflective_injector.js:777:25)
    at ReflectiveInjector_.get (http://localhost:4200/vendor/@angular/core/src/di/reflective_injector.js:586:21)
    at NgModuleInjector.get (http://localhost:4200/vendor/@angular/core/src/linker/ng_module_factory.js:98:52)
    at DebugAppView._View_AppComponent_Host0.createInternal (AppComponent.ngfactory.js:16:70)
    at DebugAppView.AppView.create (http://localhost:4200/vendor/@angular/core/src/linker/view.js:101:21)
ERROR CONTEXT:
[object Object] ; Zone: <root> ; Task: Promise.then ; Value: ViewWrappedException {_wrapperMessage: "Error in http://localhost:4200/app/app.component.js class AppComponent_Host - inline template:0:0", _originalException: NoProviderError, _originalStack: "Error: DI Exception↵    at NoProviderError.BaseExc…0/vendor/@angular/core/src/linker/view.js:101:21)", _context: DebugContext, _wrapperStack: "Error: Error in http://localhost:4200/app/app.comp…ndor/@angular/core/src/application_ref.js:353:27)"}consoleError @ zone.js:461_loop_1 @ zone.js:490drainMicroTaskQueue @ zone.js:494ZoneTask.invoke @ zone.js:426
zone.js:463 Error: Uncaught (in promise): EXCEPTION: Error in http://localhost:4200/app/app.component.js class AppComponent_Host - inline template:0:0(…)consoleError @ zone.js:463_loop_1 @ zone.js:490drainMicroTaskQueue @ zone.js:494ZoneTask.invoke @ zone.js:426

这是我的主要内容：

import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { bootstrap } from '@angular/platform-browser-dynamic';
import { enableProdMode, NgModule } from '@angular/core';
import { AppComponent, environment } from './app/';
import { AngularFireModule, FIREBASE_PROVIDERS, AuthProviders, AuthMethods } from 'angularfire2';




// Must export the config
export const firebaseConfig = {
  apiKey: "",
  authDomain: "",
  databaseURL: "",
  storageBucket: ""
};

export const firebaseAuthConfig = {
  provider: AuthProviders.Password,
  method: AuthMethods.Popup
}

@NgModule({
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp(firebaseConfig, firebaseAuthConfig)
  ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})
export class MyAppModule {}

if (environment.production) {
  enableProdMode();
}

bootstrap(AppComponent);

这是我的app.component.ts：

import { Component, Inject } from '@angular/core';
import {AngularFire, FirebaseAuth, AuthProviders} from 'angularfire2';

@Component({
  moduleId: module.id,
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css']
})
export class AppComponent {
  title = 'Tour of Heroes';
  hero = 'Windstorm';
  //constructor (private _auth: FirebaseAuth) {}
  constructor(public af: AngularFire) {
  }
  public doLogin () {
    // This will perform popup auth with google oauth and the scope will be email
    // Because those options were provided through bootstrap to DI, and we're overriding the provider.
    /*this._auth.login({
      provider: AuthProviders.Facebook
    });*/
    this.af.auth.login()
  }
}

@Component({
  selector: 'auth-status',
  template: `
    <div *ng-if="auth | async">You are logged in</div>
    <div *ng-if="!(auth | async)">Please log in</div>
  `
})
export class LoggedIn {
  constructor (@Inject(FirebaseAuth) public auth: FirebaseAuth) {}
}