Angularfire: ERROR TypeError: Object(…) is not a function” using AngularFirestore and firebase

[Zediz]

I want to use firebase and angularfire2 in my app, first of all, I installed them, and for the declarations:

in environment.ts

export const environment = {
    production: false,
    firebase: {
    apiKey: 'sfsdfdsff',
    authDomain: 'sfsdfdf',
    databaseURL: 'https://ng-sfsdfsf.firebaseio.com',
    projectId: 'ng-fitnesssfsdfdsf',
    storageBucket: 'ng-fsdfsdfsfdecff5.appspot.com',
   messagingSenderId: '21331323'
   }
  };

in app.module.ts, imports:

AngularFireModule.initializeApp(environment.firebase),
AngularFirestoreModule

in the component where want to get my data:

import { AngularFirestore } from 'angularfire2/firestore';

until this moment I have not an error, but when I want to declare my variable in the constructor to use it:

constructor(private trainingService: TrainingService, private 
db:AngularFirestore) { }

I have an error:

ERROR TypeError: Object(...) is not a function
at eval (firestore.js:28)
at ZoneDelegate.invoke (zone.js:388)
at Zone.run (zone.js:138)
In my package.json:

"angularfire2": "^5.0.0-rc.8.0",
"core-js": "^2.4.1",
"firebase": "^5.0.2",

and I don't know why?

thanks for your help

[jaufgang]

Same here. I am getting this error on a previously working project after upgrading angularfire2 from rc.4 to rc.9

[devsmitra]

I'm also getting same after updating to rc.9 also.

[hgchrre]

Same here after updating to rc.9
I also happen to use Ionic v3

[diego-lipinski-de-castro]

Same here

[jaufgang]

Help us @davideast, you're our only hope!

[diego-lipinski-de-castro]

rc8 is broke, r7 gives zone already loaded error, the only solution is go to rc4, because zone already loaded error happens until de rc7

[jamesdaniels]

@Zediz your stacktrace mentions firestore.js:28 which is of(false); of being imported from rxjs/observables. What version of RXJS are you using? RCs 8 & 9 are only compatible with RXJS 6.

Can anyone else on the thread can confirm if this is the issue?

[diego-lipinski-de-castro]

reference https://github.com/angular/zone.js/issues/1081

[jamesdaniels]

@diego-lipinski-de-castro let's please keep the conversation to the error at hand.

[jamesdaniels]

Closing for now, since I'm 99% sure that's what the issue is.

[diego-lipinski-de-castro]

Yeah, solved this issue, the problem now is with rxjs => Cannot find module "rxjs-compat/Observable"

[jamesdaniels]

@diego-lipinski-de-castro are you the one trying to import Observable or is it a lib? Observable can be imported from rxjs: import { Observable } from 'rxjs', if it's not you including you'll want to hunt down the library having troubles and file bugs with them.

[jamesdaniels]

For reference here's the RXJS 5 => 6 migration guide.

[diego-lipinski-de-castro]

I needed to install rxjs-compat, after that I updated all packaged and it's working

[Nox04]

@jamesdaniels Yes.
npm install rxjs@6 rxjs-compat@6 --save

It solved the issue.

[vandres]

Will it be possible to use this library also without rxjs-compat?

[OliveIT]

Thank you, Nox04.

[jhonnathanH]

thx Nox04 u save me

[JoAlgorithm]

@Nox04 am facing this issue after install rxjs, can u help me pls ???

in ../../node_modules/rxjs/internal/types.d.ts(81,44): error TS1005: ';' e xpected.
../../node_modules/rxjs/internal/types.d.ts(81,74): error TS1005: ';' expected

[Fjnova]

with me, it happend when I built with mode production. I can fix it by adding the bold line:

imports: [
CommonModule,
SharedModule,
AngularFireModule.initializeApp(environment.firebaseConfig),
AngularFireStorageModule
],

[ValiHar]

@Fjnova Thanks, had the same issue with production mode and that solved it!

[imvikaskohli]

@Fjnova you are genius I have resolved that issue too but the module name is different AngularFireDatabaseModule

import { AngularFireDatabase, AngularFireDatabaseModule } from '@angular/fire/database';

imports: [
CommonModule,
AngularFireModule.initializeApp(environment.firebase, 'namespace'),
AngularFireDatabaseModule,
CustomPipeModule,
FormsModule,
HomeRoutingModule,
ChartsModule,
OwlModule,
AppMatDialogModules
],

[arnaudelub]

In my case the error was Object(...).auth is not a function, so adding the AngularFireAuthModule solved the issue and production build is now working, thank you to @Fjnova for the hint

[lucianobrunet]

Thanks @Fjnova, I was crazy trying to find the solution to this problem, finally I was missing the importation of AngularFireAuthModule and AngularFirestoreModule