Добавление FireStore к броскам конструктора компонента Angular Нет ошибки провайдера

Question

Я пытаюсь настроить базовое приложение Angular 8 с помощью Google Firestore . Я перепробовал все доступные здесь решения, но не смог найти что-то, что могло бы решить ошибку, которую я получаю. Я получаю следующую ошибку при запуске приложения.

Нет провайдера для идентификатора платформы InjectionToken!

Что я делаю не так? Заранее спасибо.

Вот мой 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

Я собираюсь ответить на свой вопрос.Я заставил его работать таким образом, я удалил AngularFirestore из моего app.component.ts, установил рабочий сервис как приватный в конструкторе:

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;
}

Это сработало, надеюсь, это поможеткто то.Спасибо

Answer 2

Похоже, проблема связана с BrowserModule из @ angular / platform-

• platformBrowserDynamic - это функция, используемая для начальной загрузки приложения Angular.
• BrowserModule экспортирует CommonModule и предоставляет несколько специфичных для сервисовна платформу браузера (в отличие от ServerModule или ServiceWorkerModule).