Question

我无法运行本教程中提供的代码： https://coursetro.com/posts/code/94/Use-Angular-with-Google＆＃39; S-云---的FireStore教程

我在控制台中收到错误

安装新库

后

npm install angularfire2 firebase --save

并正在运行

ng serve

我也得到了最新的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 { }

Answer 2

我添加了提供者条目，提供者：[AngularFirestore]，和进口。从＆＃39; angularfire2 / firestore＆＃39;中导入{AngularFirestore}; 收到此错误：

未捕获错误：无法解析AngularFirestore的所有参数：（[object Object]，？）。       在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）       在compiler.es5.js：15855       在Array.forEach（）       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）       在JitCompiler.webpackJsonp ... / .. / ../ compiler /@angular/compiler.es5.js.JitCompiler._loadModules（compiler.es5.js：26826）
<小时/>   我将更改恢复为原始的app.module.ts。该教程中的相同代码仅在第二天工作。没有依赖注入投诉。从数据库加载的数据

Answer 3

这对我有用。

我只在我的app.module.ts中导入了 AngularFirestoreModule “导入数组”，而不在提供程序中导入 AngularFireStore 。

Answer 4

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

Angular生成＆＃39;错误：没有AngularFirestore的提供者！＆＃39;使用Cloud Firestore

4 个答案: