Angular 使用 Cloud Firestore 生成'Error: No provider for AngularFirestore!'

Question

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

我在控制台中得到一个错误

安装新库后

npm安装angularfire2 firebase——保存

和运行

ng服务

我还得到了最新的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)

应用程序模块.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 { }

应用程序组件.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

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

因为你应该注意到这个模块有注入。

像这样。

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

Answer 2

这对我有效。

我只在app.module.ts中导入了AngularFirestoreModule"imports array"，而不在提供程序中导入AngularFireStore。

Answer 3

我添加了提供者条目，提供者：[AngularFirestore]，和进口。从"angularfire2/firestore"导入｛AngularFirestore｝；收到此错误：

未捕获错误：无法解析AngularFirestore的所有参数：([object object]，？)。语法错误(compiler.es5.js:1694)位于CompileMetadataResolver.webpackJsonp…/../../compiler/@angular/compiler.es5.js.CompileMetadataSolutionr._getDependenciesMetadata(compiler.es6.js:15781)位于CompileMetadataResolver.webpackJsonp…/../../compiler/@angular/compiler.es5.js.CompileMetadataSolutionr._getTypeMetadata(compiler.es6.js:15649)位于CompileMetadataResolver.webpackJsonp…/../../compiler/@angular/compiler.es5.js.CompileMetadataSolutionr._getInjectableMetadata(compiler.es6.js:15635)位于CompileMetadataResolver.webpackJsonp…/../../compiler/@compiler.es5.js.CompileMetadataSolution.getProviderMetadata(compiler.es5.js:15926)在compiler.es5.js:15855在Array.forEach()位于CompileMetadataResolver.webpackJsonp…/../../compiler/@angular/compiler.es5.js.CompileMetadataSolutionr._getProvidersMetadata(compiler.es6.js:15815)位于CompileMetadataResolver.webpackJsonp…/../../compiler/@angular/compailer.es5.js.CompileMetadataSolutionr.getNgModuleMetadata(compiler.es5.js:15470)在JitCompiler.webpackJsonp…/../../compiler/@angular/compiler.es5.js.JitComplier._loadModules(compiler.es6.js:226826)

---

我将更改恢复到原始的app.module.ts。第二天教程中的相同代码刚刚生效。没有依赖注入投诉。从数据库加载的数据

Answer 4

我也有完全相同的错误。我不得不从app.module.ts中的导入中删除AngularFirestoreModule，而不将其添加到提供程序中。这可能是因为我已经将其作为我设置的CoreModule的一部分导入。