无法解析AngularFirestores的所有参数:([object Object]，? [英] Can't resolve all parameters for AngularFirestores: ([object Object], ? )

问题描述

• Angular 5
• AngularFire5
• Firebase&消防站

我正在尝试构建用于生产的应用，但是我仍然遇到以下错误:

I am trying to build my app for production, however I keep running into the following errors:

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() {
  }
}

在我的构造函数中，我认为这是一个循环依赖的问题，尽管我不确定如何解决.

I think this is an issue with circular dependency, in my constructors, though im not sure how to resolve it.

推荐答案

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

you have to import AngularFirestoreModule into your app.module.ts

在导入和提供程序中.

提供者:[AngularFirestoreModule]

providers: [AngularFirestoreModule]

这篇关于无法解析AngularFirestores的所有参数:([object Object]，?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！