使用 angularFire2 5.0 版将 angular 连接到 firebase

Question

我似乎遇到了无法找到答案的错误。我整天都在搜索自述文件和 angularFire 文档。我在控制台中收到此错误

Error: No provider for InjectionToken FirebaseAppConfigToken!
    at injectionError (core.es5.js:1169)
    at noProviderError (core.es5.js:1207)
    at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_._throwOrNull (core.es5.js:2649)
    at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_._getByKeyDefault (core.es5.js:2688)
    at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_._getByKey (core.es5.js:2620)
    at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_.get (core.es5.js:2489)
    at resolveNgModuleDep (core.es5.js:9492)
    at _callFactory (core.es5.js:9556)
    at _createProviderInstance (core.es5.js:9506)
    at resolveNgModuleDep (core.es5.js:9488)

所以我尝试将其包含在 app.module.ts import { NgModule, InjectionToken } from '@angular/core'; 中并将其列在 providers 数组中。然后我得到了休闲错误....

Uncaught Error: Can't resolve all parameters for InjectionToken: (?).
    at syntaxError (compiler.es5.js:1694)
    at CompileMetadataResolver.webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver._getDependenciesMetadata (compiler.es5.js:15781)
    at CompileMetadataResolver.webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver._getTypeMetadata (compiler.es5.js:15649)
    at CompileMetadataResolver.webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver._getInjectableMetadata (compiler.es5.js:15635)
    at CompileMetadataResolver.webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver.getProviderMetadata (compiler.es5.js:15926)
    at compiler.es5.js:15855
    at Array.forEach (<anonymous>)
    at CompileMetadataResolver.webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver._getProvidersMetadata (compiler.es5.js:15815)
    at CompileMetadataResolver.webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver.getNgModuleMetadata (compiler.es5.js:15470)
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._loadModules (compiler.es5.js:26826)

我没有使用任何 firebase 授权方法。我只是想连接到我的 firebase 数据库并使用它。

我还想提一下，我确实在 firebase 控制台中将读写规则设置为 true，所以我认为这不是问题所在。我还在 environments/environment.prod.ts and environments.ts 文件中包含了我的 firebaseConfig 对象。然后我像这样 AngularFireModule.initializeApp(environment.firebase)

将其传递到 app.module.ts 的导入数组中

如果有人能帮助我阐明这个主题，我将不胜感激。谢谢！

更新：

我认为 id 包括我的 app.module.ts 和 app.component.ts 文件以提供帮助。

app.module.ts

import { InjectionToken } from '@angular/core';
// Modules
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpModule } from '@angular/http';
// Firebase Modules
import { AngularFireModule } from 'angularFire2';
import { AngularFireAuthModule } from 'angularFire2/auth';
import { AngularFirestoreModule, AngularFirestore } from 'angularfire2/firestore';
// Components
import { AppComponent } from './app.component';
// Services
// environment
import { environment } from './../environments/environment';

// testing firebase config options environment param
console.log(environment.firebase);

// Set up like the example from the angualrFirebase install guide
// https://github.com/angular/angularfire2/blob/master/docs/install-and-setup.md#6-setup-individual-ngmodules

// I kept this project as simple as possible to focus on..
// Debugging the firebase and angularFire2 issue I'm experiencing.
// Even after trying to emulate the example use code from the angularFire2 repo,
// I'm still experiencing the same error.

// ERROR Error: No provider for InjectionToken FirebaseAppConfigToken!

// If I include InjectionToken as a provider I get the other error I was experiencing

// Uncaught Error: Can't resolve all parameters for InjectionToken: (?).

// Including angularFirestore as a provider throws a different error...
// I dont think I should have to list any providers though from what I can gather form the
// angularFire2 docs

// Uncaught Error: Can't resolve all parameters for AngularFirestore: ([object Object], ?).

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpModule,
    AngularFireModule.initializeApp(environment.firebase, 'test-blog-app'),
    AngularFirestoreModule,
    AngularFireAuthModule
  ],
  providers: [
    // AngularFirestore,
    // InjectionToken
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

import { Component } from '@angular/core';
import { AngularFirestore } from 'angularfire2/firestore';
import { Observable } from 'rxjs/Observable';

// This file is based off of the angularFire github repository
// https://github.com/angular/angularfire2#example-use

@Component({
  selector: 'app-root',
  template: `
  <ul>
    <li *ngFor="let post of posts | async">
      {{ post.title }}
    </li>
  </ul>
  `
})
export class AppComponent {
  posts: Observable<any[]>;
  constructor(db: AngularFirestore) {
    this.posts = db.collection('posts').valueChanges();
  }
}

Answer 1

我试图从 angularFire 而不是 angularfire 导入。

import { AngularFireModule } from 'angularFire2';
import { AngularFireAuthModule } from 'angularFire2/auth';

应该是

import { AngularFireModule } from 'angularfire2';
import { AngularFireAuthModule } from 'angularfire2/auth';

我相信这才是真正的错误。这也修复了我收到的 ng serve 警告。谢谢大家。

使用 angularFire2 5.0 版将 angular 连接到 firebase

Connecting angular to firebase using angularFire2 version 5.0

firebase

angular-cli

angularfire2

angular

更新：

app.module.ts

app.component.ts