无法解析 AngularFirestores 的所有参数：([object Object], ?)

Question

我在用什么

• 角 5
• AngularFire5
• Firebase 和 Firestore

我正在努力实现的目标

我正在尝试构建我的应用程序以用于生产，但是我不断遇到以下错误：

ERROR in Error: Can't resolve all parameters for AngularFirestore in /Users/gurgengrigory
an/Desktop/LiquidLink/node_modules/angularfire2/firestore/index.d.ts: ([object Object], ?
).

到目前为止我所拥有的

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { AngularFireModule } from 'angularfire2';
import { AngularFireAuthModule } from 'angularfire2/auth';
import { AngularFirestoreModule, AngularFirestore } from 'angularfire2/firestore';
import { AngularFontAwesomeModule } from 'angular-font-awesome';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { AuthService } from './auth.service';
import { LinkService } from './link.service';
import { environment } from '../environments/environment.prod';
import { NavbarComponent } from './navbar/navbar.component';
import { HomeComponent } from './home/home.component';
import { LoginComponent } from './login/login.component';
import { RegisterComponent } from './register/register.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { LinkTableComponent } from './dashboard/link-table/link-table.component';
import { AddLinkComponent } from './home/add-link/add-link.component';
import { RedirectComponent } from './redirect/redirect.component';
import { ErrorComponent } from './error/error.component'


@NgModule({
  declarations: [
    AppComponent,
    NavbarComponent,
    HomeComponent,
    LoginComponent,
    RegisterComponent,
    DashboardComponent,
    LinkTableComponent,
    AddLinkComponent,
    RedirectComponent,
    ErrorComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    NgbModule.forRoot(),
    AppRoutingModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireAuthModule,
    AngularFirestoreModule,
    AngularFontAwesomeModule
  ],
  providers: [AngularFirestore, AuthService, LinkService],
  bootstrap: [AppComponent]
})
export class AppModule { }

link.service.ts

import { Injectable } from '@angular/core';
import { AuthService } from './auth.service';
import { AngularFirestore, AngularFirestoreDocument, AngularFirestoreCollection } from 'angularfire2/firestore';

export interface Link { uid: string; url: string; shortURL: string; clicks: number }

@Injectable()
export class LinkService {
  shortURL = '';

  constructor(public authService: AuthService, private afs: AngularFirestore) {
  }
  createShortURL() {
    var text = '';
    var possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
    var length = 6;

    for(var i = 0; i < length; i++) {
        text += possible.charAt(Math.floor(Math.random() * possible.length));
    }
    return this.shortURL = text;
  }
  addLink(url: string) {
    this.afs.collection('Links').doc(this.shortURL).set({
      'uid': this.authService.currentUserId,
      'url': url,
      'shortURL': this.shortURL,
      'clicks': 0
    });
  }
}

redirect.component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { AngularFirestore, AngularFirestoreCollection, AngularFirestoreDocument } from 'angularfire2/firestore';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

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

  linkRef: AngularFirestoreDocument<any>;
  link: Observable<any>;
  path: string;
  url: string;
  constructor(private afs: AngularFirestore, private router: Router) {
    this.path = this.router.url.replace('/','');
    this.linkRef = this.afs.collection('Links').doc(this.path);
    this.link = this.linkRef.valueChanges();
    this.link.subscribe(data => {
      if (data === null) {
        this.router.navigate(['/404']);
      } else {
        this.url = data.url;
        window.location.href = data.url;
      }
    });
  }

  ngOnInit() {
  }

}

add-link.component.ts

import { Component, OnInit } from '@angular/core';
import { AuthService } from '../../auth.service';
import { LinkService } from '../../link.service';

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

  url = '';
  alert: boolean = false;

  constructor(public authService: AuthService, public LinkService: LinkService) { }

  ngOnInit() {
  }
  onAddLink() {
    if (this.authService.isUserEmailLoggedIn) {
      this.LinkService.createShortURL();
      this.LinkService.addLink(this.url);
      this.clearFields();
      this.alert = false;
    } else {
      this.clearFields();
      this.alert = true;
    }
  }
  dismiss() {
    this.alert = false;
  }
  clearFields() {
    this.url = '';
  }
}

链接表.component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { AngularFirestore, AngularFirestoreCollection, AngularFirestoreDocument } from 'angularfire2/firestore';

@Component({
  selector: 'app-link-table',
  templateUrl: './link-table.component.html',
  styleUrls: ['./link-table.component.css']
})
export class LinkTableComponent implements OnInit {
  links: any;
  constructor(private afs: AngularFirestore) {
    this.links = afs.collection('Links').valueChanges();
  }

  ngOnInit() {
  }
}

我认为这是循环依赖的问题，在我的构造函数中，虽然我不知道如何解决它。

Answer 1

可能的答案

看完这里的讨论后： https://github.com/angular/angularfire2/issues/1206

AngularFirestore 不应该是提供者。 David East 评论如下：

@habib786 这没什么好担心的。它不会变成一个 直到 Angular 6 出现错误，这还有很长的路要走。它也不会破裂 你的构建。它与 Angular CLI 的解释方式有关 命名空间，我们正在努力。

所以看来问题可能是由我将 AngularFirestore 添加为提供程序开始的，但到目前为止还没有实际错误。如果我的理解有误，请大家指正！

Answer 2

你必须将 AngularFirestoreModule 导入你的 app.module.ts

在导入和提供程序中。

提供者：[AngularFirestoreModule]