Question

我正在尝试使用 Google Firestore 设置基本的Angular 8应用程序。我已经尝试过这里提供的所有解决方案，但是找不到可以解决我遇到的错误的方法。运行应用程序时出现以下错误。

没有提供InjectionToken平台ID的提供商！

我在做什么错？预先感谢。

这是我的app.component.ts：

import { Component,OnInit } from '@angular/core';
import {WorkService} from 'src/app/work.service';
import { AngularFirestore } from '@angular/fire/firestore';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'ysport';
  constructor(private db: AngularFirestore, workService:WorkService){}

  ngOnInit() {

  }


}

这是我的app.module.ts：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { AngularFireModule } from '@angular/fire';
import { AngularFirestore } from '@angular/fire/firestore';
import { AngularFireDatabaseModule } from '@angular/fire/database';
import { environment } from '../environments/environment';
import { WorksComponent } from './works/works.component';
import { WorkService } from "./work.service";


import { AngularFirestoreModule } from '@angular/fire/firestore';
@NgModule({
  declarations: [
    AppComponent,
    WorksComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    AngularFireModule.initializeApp(environment.firebaseConfig),
    AngularFirestoreModule
  ],
  providers: [WorkService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

这是我要使用的服务：

import { Injectable } from '@angular/core';
import { AngularFirestore } from '@angular/fire/firestore';
import { Work } from 'src/app/work.model';

@Injectable({
  providedIn: 'root'
})
export class WorkService {

  constructor(private firestore: AngularFirestore) { }

  getWorks() {
      return this.firestore.collection('works').snapshotChanges();
  }
}

Answer 1

似乎来自@ angular / platform-

的BrowserModule存在问题

platformBrowserDynamic是用于引导Angular应用程序的函数。
BrowserModule导出CommonModule并提供一些特定于浏览器平台（与ServerModule或ServiceWorkerModule相反）。

Answer 2

我要回答我自己的问题。我以这种方式工作，我从app.component.ts中删除了AngularFirestore，在构造函数中将工作服务设置为私有：

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import {WorkService} from '../work.service';

interface Work {
  name: string;
  desc: string;
  image: string;
}


@Component({
  selector: 'app-works',
  templateUrl: './works.component.html',
  styleUrls: ['./works.component.css']
})
export class WorksComponent implements OnInit {

  works: Observable<Work[]>;

  constructor(private workService: WorkService) { }

  ngOnInit() {
    this.works = this.workService.getWorks();
  }

}

这是我的app.module.ts：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { WorksComponent } from './works/works.component';
import { ReactiveFormsModule } from "@angular/forms";

import { environment } from "src/environments/environment";
import { AngularFireModule } from "@angular/fire";
import { AngularFirestoreModule } from "@angular/fire/firestore";
import { WorksGifComponent } from './works-gif/works-gif.component';
import { WorkService } from './work.service';

@NgModule({
  declarations: [
    AppComponent,
    WorksComponent,
    WorksGifComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ReactiveFormsModule,
    AngularFireModule.initializeApp(environment.firebaseConfig),
    AngularFirestoreModule
  ],
  providers: [WorkService],
  bootstrap: [AppComponent]
})
export class AppModule { }

还有service.ts，我发现了一个Observable示例，并通过在Firestore数据库中创建一个具有集合数据模型的接口：

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { AngularFirestoreCollection } from '@angular/fire/firestore';
import { AngularFirestore } from '@angular/fire/firestore';

@Injectable({
  providedIn: 'root'
})

export class WorkService {

  worksCol: AngularFirestoreCollection<Work>;
  works: Observable<Work[]>;

  constructor(private afs: AngularFirestore) { }

  getWorks() {
    this.worksCol = this.afs.collection('works');
    this.works = this.worksCol.valueChanges();
    return this.worksCol.valueChanges();
  }
}

interface Work {
  name: string;
  desc: string;
  image: string;
}

这行得通，希望能对某人有所帮助。谢谢

将Firestore添加到Angular组件构造函数中不会引发提供程序错误

2 个答案: