"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