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

Question

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

Answer 1

I had same problem but i solved it. You can follow my work. This is a example for ionic.

Install rxjs

npm i rxjs@^6.0 rxjs-compat

import rxjs-compact to file

import { AngularFireDatabase, AngularFireList } from 'angularfire2/database';
import { Observable } from 'rxjs-compat';
import { map } from 'rxjs-compat/operators';

https://stackoverflow.com/a/50447449/6567753

Answer 2

AngularFire maintainer here, we've had a number of breaking changes as we march towards 5.0 GA. In order to support Angular 6, recent releases of AngularFire require rxjs 6. While yes downgrading or pinning to an old version would work for quick and dirty fix, I wouldn't suggest that as it will leave you out of improvements to the libraries in the future.

I'd recommend upgrading rxj6 to version 6 and including rxjs-compat if you have dependencies that haven't yet upgraded:

npm i rxjs@^6.0 rxjs-compat

Keep an eye on the angularfire changelog for important information on any breaking changes; once we hit GA we will abide by semver.

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

Answer 3

npm install rxjs@6 rxjs-compat@6

This solved the issue

Answer 4

I have the same error when installing "angularfire2": 5.0.0-rc.9.

The error is gone when I rollback to 5.0.0-rc.6.

npm install angularfire2@5.0.0-rc.6
npm install firebase@4.12.1

Answer 5

Remove ^ this one in front of the version. So like this.

{
    ...

    "angularfire2": "5.0.0-rc.6",
    "firebase": "4.12.1",
}

Answer 6

This was my solution:

npm uninstall angularfire2
npm install angularfire2@5.0.0-rc.4
npm uninstall firebase
npm install firebase@4.8.0

Answer 7

I got the same error. As soon as i updated rxjs with sudo npm update rxjs. And then updated rxjs-compat with sudo npm i rxjs@latest rxjs-compat. After fixing the vulnerabilities and then running ng build then ng serve. This fixed my error. (on macOS)

Answer 8

I first uninstalled firebase and angularfire2 with:

• npm uninstall firebase
• npm uninstall angularfire2

And then reinstalled again with:

• npm install firebase@4.12.1
• npm install angularfire2@5.0.0-rc.6

Using ^ in the versions actually installed angularfire2@5.0.0-rc.9 so I just removed that part.