Angular: ошибка: Uncaught (в обещании): TypeError: Object (...) не является функцией

Question

Я пытался интегрировать облако Google Firestore в мое угловое приложение, и это привело к этой ошибке

Ошибка: Uncaught (в обещании): TypeError: Object (...) не является функцией

когда я запускаю свой сервис в конструкторе

этот сервис я использую:

import { Injectable } from '@angular/core';
import { AngularFirestore, AngularFirestoreCollection,
        AngularFirestoreDocument } from 'angularfire2/firestore';
import { Idata } from '../model';
import { Observable } from 'rxjs/Observable';
@Injectable()
export class DataService {

  // collections initialisation
  datas: Observable<Idata[]>;
  dataCollection: AngularFirestoreCollection<Idata>;
  dataDocumment: AngularFirestoreDocument<Idata>;
  data: Observable<Idata>;
  constructor(public afs: AngularFirestore) {
   }

   // get all documents for caucus
   getDataCaucus() {
    this.dataCollection = this.afs.collection('eluCC');
    this.datas = this.afs.collection('eluCC').snapshotChanges().map(changes => {
      return changes.map(a => {
        const data = a.payload.doc.data() as Idata;
        data.id = a.payload.doc.id;
        return data;
      });
    });
     return this.datas;
   }
}

и этотВот как я запускаю его в свой компонент

    import { Component, OnInit, AfterViewInit  } from '@angular/core';

import { DataService } from '../../services/data.service';
import { Observable } from 'rxjs/Observable';
import { AngularFirestore } from 'angularfire2/firestore';

declare interface DataTable {
    headerRow: string[];
    footerRow: string[];
    dataRows: string[][];
  }
declare var $:any;


@Component({
    selector: 'app-grid-cmp',
    templateUrl: 'grid.component.html'
})

export class GridSystemComponent {
    temp = [];
    rows = [];

    public dataTable: DataTable;

    constructor(private afs: AngularFirestore,private dataService: DataService) { 
         this.dataService.getDataCaucus().subscribe((datas) => {
           this.temp = [...datas];
           this.rows = datas;
           console.log(datas);
         });
    }

    ngOnInit() {
        this.dataTable = {
            headerRow: [ 'Name', 'Position', 'Office', 'Age', 'Date', 'Actions' ],
            footerRow: [ 'Name', 'Position', 'Office', 'Age', 'Start Date', 'Actions' ],

            dataRows: [
                ['Airi Satou', 'Andrew Mike', 'Develop', '2013', '99,225', ''],
                ['Angelica Ramos', 'John Doe', 'Design', '2012', '89,241', 'btn-round'],
                ['Ashton Cox', 'Alex Mike', 'Design', '2010', '92,144', 'btn-simple'],
                ['Bradley Greer', 'Mike Monday', 'Marketing', '2013', '49,990', 'btn-round'],
                ['Brenden Wagner', 'Paul Dickens', 'Communication', '2015', '69,201', ''],
                ['Brielle Williamson', 'Mike Monday', 'Marketing', '2013', '49,990', 'btn-round'],
                ['Caesar Vance', 'Mike Monday', 'Marketing', '2013', '49,990', 'btn-round'],
                ['Cedric Kelly', 'Mike Monday', 'Marketing', '2013', '49,990', 'btn-round'],
                ['Charde Marshall', 'Mike Monday', 'Marketing', '2013', '49,990', 'btn-round'],
                ['Colleen Hurst', 'Mike Monday', 'Marketing', '2013', '49,990', 'btn-round'],
                ['Dai Rios', 'Andrew Mike', 'Develop', '2013', '99,225', ''],
                ['Doris Wilder', 'John Doe', 'Design', '2012', '89,241', 'btn-round'],
                ['Fiona Green', 'Alex Mike', 'Design', '2010', '92,144', 'btn-simple'],
                ['Garrett Winters', 'Mike Monday', 'Marketing', '2013', '49,990', 'btn-round'],
                ['Gavin Cortez', 'Paul Dickens', 'Communication', '2015', '69,201', ''],
                ['Gavin Joyce', 'Mike Monday', 'Marketing', '2013', '49,990', 'btn-round'],
                ['Gloria Little', 'Mike Monday', 'Marketing', '2013', '49,990', 'btn-round'],
                ['Haley Kennedy', 'Mike Monday', 'Marketing', '2013', '49,990', 'btn-round'],
                ['Herrod Chandler', 'Mike Monday', 'Marketing', '2013', '49,990', 'btn-round'],
                ['Hope Fuentes', 'Mike Monday', 'Marketing', '2013', '49,990', 'btn-round'],
                ['Howard Hatfield', 'Andrew Mike', 'Develop', '2013', '99,225', ''],
                ['Jena Gaines', 'John Doe', 'Design', '2012', '89,241', 'btn-round'],
                ['Jenette Caldwell', 'Alex Mike', 'Design', '2010', '92,144', 'btn-simple'],
                ['Jennifer Chang', 'Mike Monday', 'Marketing', '2013', '49,990', 'btn-round'],
                ['Martena Mccray', 'Paul Dickens', 'Communication', '2015', '69,201', ''],
                ['Michael Silva', 'Mike Monday', 'Marketing', '2013', '49,990', 'btn-round'],
                ['Michelle House', 'Mike Monday', 'Marketing', '2013', '49,990', 'btn-round'],
                ['Paul Byrd', 'Mike Monday', 'Marketing', '2013', '49,990', 'btn-round']
            ]
         };

    }

    ngAfterViewInit() {
        $('#datatables').DataTable({
            'pagingType': 'full_numbers',
            'lengthMenu': [[10, 25, 50, -1], [10, 25, 50, 'All']],
            responsive: true,
            language: {
            search: '_INPUT_',
            searchPlaceholder: 'Search records',
            }

        });

        const table = $('#datatables').DataTable();

        // Edit record
        table.on( 'click', '.edit', function () {
            const $tr = $(this).closest('tr');

            const data = table.row($tr).data();
            alert( 'You press on Row: ' + data[0] + ' ' + data[1] + ' ' + data[2] + '\'s row.' );
        } );

        // Delete a record
        table.on( 'click', '.remove', function (e: any) {
            const $tr = $(this).closest('tr');
            table.row($tr).remove().draw();
            e.preventDefault();
        } );

        // Like record
        table.on( 'click', '.like', function () {
            alert('You clicked on Like button');
        });
    }
}

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

Есть идеи, что может вызвать это?

Answer 1

Вам необходимо обновить rxjs до версии 6.0+.Если вы используете Angular 6, вам также необходимо установить rxjs-compat.Просто запустите комманд ниже, чтобы решить обе проблемы

npm install rxjs@6.0 rxjs-compat --save

Answer 2

Вы получаете сообщение об ошибке, потому что вы используете Rxjs 5.x.

Вы должны обновить Rxjs до 6.0+. Следуйте документации. (Это довольно просто)

В rxjs 6.0 оператор импорта был изменен и .map также изменился в терминах структуры.

В rxjs 6.0 введен новый оператор .pipe, в котором вы можете выполнять несколько операций одна за другой.

Пример:

import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

this.datas = this.afs.collection('eluCC').snapshotChanges()
   .pipe(
      map(changes => {
        return changes.map(a => {
          const data = a.payload.doc.data() as Idata;
          data.id = a.payload.doc.id;
          return data;
        })
      })
   );

---

Если вы не хотите обновлять Rxj (I don't why - it is pretty easy really), downgrade to angularfire2 5.0.0-rc.6 version **(not recommended)**. npm, то я -s angularfire2@5.0.0-rc.6`