title: Angular : Error: Uncaught (in promise): TypeError: Object(...) is not a function
body: <p>I was trying to integrate google cloud firestore in my angular app and it lead to that error </p>
  
  <blockquote>
    <p>Error: Uncaught (in promise): TypeError: Object(...) is not a function
    <a href="https://i.stack.imgur.com/qLOtP.png" rel="noreferrer"><img src="https://i.stack.imgur.com/qLOtP.png" alt="full error log"></a></p>
  </blockquote>
  
  <p>when I initiate my service into the constructor</p>
  
  <p>this the service I am using :</p>
  
  <pre><code>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&lt;Idata[]&gt;;
    dataCollection: AngularFirestoreCollection&lt;Idata&gt;;
    dataDocumment: AngularFirestoreDocument&lt;Idata&gt;;
    data: Observable&lt;Idata&gt;;
    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 =&gt; {
        return changes.map(a =&gt; {
          const data = a.payload.doc.data() as Idata;
          data.id = a.payload.doc.id;
          return data;
        });
      });
       return this.datas;
     }
  }
  </code></pre>
  
  <p>and this is how I initiate it into my component</p>
  
  <pre><code>    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) =&gt; {
             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');
          });
      }
  }
  </code></pre>
  
  <p>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.</p>
  
  <p>Any idea of what might cause this? </p>