不能解析AngularFirestores的所有参数：([对象对象]，？)

Question

我用的是

• 角5
• AngularFire5
• [消]火源与火焰恢复

我想要实现的

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

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

link-table.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 786这不是什么值得担心的事情。它不会成为一个误差，直到6角，这是一个很长的路。它也不会破坏你的身材。它与角度CLI解释名称空间的方式有关，我们正在研究它。

因此，问题似乎是由我将AngularFirestore添加为提供程序启动的，但目前还没有实际的错误。如果我的理解不正确，请有人指正我！

Answer 2

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

在进口和供应商方面。

提供者: AngularFirestoreModule