Angular : Error: Uncaught (in promise): TypeError: Object(...) is not a function
I was trying to integrate google cloud firestore in my angular app and it lead to that error
Error: Uncaught (in promise): TypeError: Object(...) is not a function
when I initiate my service into the constructor
this the service I am using :
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;
}
}
and this is how I initiate it into my component
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');
});
}
}
I have to mention that my app have several module and I have set the provider for the same service in each of them and all the component return the same mistake.
Any idea of what might cause this?
Answer
You're getting the error because you're using Rxjs 5.x.
You have to upgrade Rxjs to 6.0+. Follow the docs. (It is pretty easy)
In rxjs 6.0 the import statement has been changed & .map is also changed in term of structure.
From rxjs 6.0 they introduced a new operator called .pipe where you can perform multiple operation one by one.
Example:
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;
})
})
);
In case you don't want to upgrade Rxj(I don't why - it is pretty easy really), downgrade to angularfire2 5.0.0-rc.6 version **(not recommended)**.
npm i -s [email protected]`