Angular生成'错误:没有AngularFirestore的提供者!' 使用Cloud Firestore

Question

我无法运行本教程中提供的代码:https: //coursetro.com/posts/code/94/Use-Angular-with-Google的-Cloud-Firestore ---教程

我在控制台中收到错误

安装新库后

npm install angularfire2 firebase --save

并运行

服务

我也得到了最新的cli

我在控制台中收到此错误:

ERROR Error: No provider for AngularFirestore!
at injectionError (vendor.bundle.js:87513)
at noProviderError (vendor.bundle.js:87551)
at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_._throwOrNull (vendor.bundle.js:88993)
at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_._getByKeyDefault (vendor.bundle.js:89032)
at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_._getByKey (vendor.bundle.js:88964)
at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_.get (vendor.bundle.js:88833)
at resolveNgModuleDep (vendor.bundle.js:95836)
at NgModuleRef_.webpackJsonp.../../../core/@angular/core.es5.js.NgModuleRef_.get (vendor.bundle.js:96906)
at resolveDep (vendor.bundle.js:97394)
at createClass (vendor.bundle.js:97256)

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import { AngularFireModule } from 'angularfire2';
import { AngularFirestoreModule } from 'angularfire2/firestore';


export const firebaseConfig = {
  apiKey: "val",
  authDomain: "val",
  databaseURL: "val",
  projectId: "val",
  storageBucket: "val",
  messagingSenderId: "val"
};

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp(firebaseConfig),
    AngularFirestoreModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

import { Component,OnInit } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { AngularFirestore, AngularFirestoreCollection, AngularFirestoreDocument } from 'angularfire2/firestore';
import 'rxjs/add/operator/map';
interface Post {
  title: string;
  content: string;
}
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  postsCol: AngularFirestoreCollection<Post>;
  posts: Observable<Post[]>;
  constructor(private afs: AngularFirestore) {
  }
  ngOnInit() {
    this.postsCol = this.afs.collection('posts');
    this.posts = this.postsCol.valueChanges();
  }
}

app.component.html

<ul *ngFor="let post of posts | async">
  <li>
    <strong>{{ post.title}}</strong>
    <br>
    {{post.content}}
  </li>
</ul>

Answer 1

您应该添加providers: [AngularFirestore]在app.module.ts.

因为你应该注意角度这个模块有注射.

像这样.

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp(firebaseConfig),
    AngularFirestoreModule,
    FormsModule
  ],
  providers: [AngularFirestore],
  bootstrap: [AppComponent]
})
export class AppModule { }