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

问题描述

• 角 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屋！