Не удается разрешить все параметры для AngularFirestores: ([object Object],?)

Что я использую

  • Угловой 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 { }

ссылка.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 = '';
  }
}

ссылка-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() {
  }
}

Я думаю, что это проблема с циклической зависимостью в моих конструкторах, хотя я не уверен, как ее решить.


person Gurgen Grigoryan    schedule 27.11.2017    source источник
comment
Что произойдет, если вы удалите FireStore из провайдеров?   -  person Witold Tkaczyk    schedule 27.11.2017
comment
Я получаю следующее предупреждение: Can't resolve all parameters for Ang ularFirestore in /Users/gurgengrigoryan/Desktop/LiquidLink/node_modules/angularfire2/fire store/index.d.ts: ([object Object], ?). This will become an error in Angular v6.x Warning: Can't resolve all parameters for AngularFirestore in /Users/gurgengrigoryan/Desk top/LiquidLink/node_modules/angularfire2/firestore/index.d.ts: ([object Object], ?). This will become an error in Angular v6.x Я столкнулся с проблемой, которая была устранена, и ее решение состояло в том, чтобы добавить Firestore в качестве поставщика.   -  person Gurgen Grigoryan    schedule 27.11.2017


Ответы (2)


Возможный ответ

После просмотра обсуждения здесь: https://github.com/angular/angularfire2/issues/1206

AngularFirestore не должен быть провайдером. Дэвид Ист прокомментировал следующее:

@ habib786 Не о чем беспокоиться. Это не станет ошибкой до Angular 6, а это далеко. Это также не сломает вашу сборку. Это связано с тем, как Angular CLI интерпретирует пространства имен, мы работаем над этим.

Таким образом, похоже, проблема возникла из-за того, что я добавил AngularFirestore в качестве поставщика, но на данный момент фактической ошибки нет. Если мое понимание неверно, кто-нибудь, пожалуйста, поправьте меня!

person Gurgen Grigoryan    schedule 27.11.2017
comment
Я думаю, вы правы, вам не нужно предоставлять FireStore удалить это. Вы должны импортировать FireStore в свой сервис и просто предоставлять этот сервис. - person stojevskimilan; 27.11.2017

вам нужно импортировать AngularFirestoreModule в ваш app.module.ts

В импорте и провайдерах.

провайдеры: [AngularFirestoreModule]

person Yazar Arafath    schedule 13.04.2018