Angularfire: automaticDataCollectionEnabled' is missing in type 'FirebaseApp'

[MingyuJeon]

Version info

Angular: 5.2.9

Firebase: ^4.13.0

AngularFire2: ^5.0.0-rc.6.0

Other (e.g. Ionic/Cordova, Node, browser, operating system):Ionic/Cordova

How to reproduce these conditions

package.json

"dependencies": {
    "@angular/common": "5.2.9",
    "@angular/compiler": "5.2.9",
    "@angular/compiler-cli": "5.2.9",
    "@angular/core": "5.2.9",
    "@angular/forms": "5.2.9",
    "@angular/http": "5.2.9",
    "@angular/platform-browser": "5.2.9",
    "@angular/platform-browser-dynamic": "5.2.9",
    "@ionic-native/core": "4.7.0",
    "@ionic-native/splash-screen": "4.7.0",
    "@ionic-native/status-bar": "4.7.0",
    "@ionic/pro": "1.0.20",
    "@ionic/storage": "2.1.3",
    "angularfire2": "^5.0.0-rc.6.0",
    "firebase": "^4.13.0",
    "ionic-angular": "3.9.2",
    "ionicons": "3.0.0",
    "promise-polyfill": "^7.1.2",
    "rxjs": "5.5.8",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.26"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.1.9",
    "typescript": "~2.6.2"
  }

Debug output

Errors in the JavaScript console

typescript: node_modules/angularfire2/firebase.app.module.d.ts, line: 10 
            Class 'FirebaseApp' incorrectly implements interface 'FirebaseApp'. Property 
            'automaticDataCollectionEnabled' is missing in type 'FirebaseApp'. 

       L9:  export declare const FirebaseAppConfigToken: InjectionToken;
      L10:  export declare class FirebaseApp implements FBApp {
      L11:      name: string;

Expected behavior

Ionic compile would complete with any errors

Actual behavior

Because automaticDataCollectionEnabled is missing in type 'FirebaseApp', error occurs.

[Tamango92]

This issue is related to latest firebase update https://github.com/firebase/firebase-js-sdk/commit/7c1aa4470c0f5474b11fe57ada4edff65ed90adc

Temporary solution is to set version of firebase in your projects package.json to 4.12.1

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

[zverbeta]

@Tamango92 Does it work for you? I trying your solution and it's doesn't working

[zverbeta]

I have installed "@firebase/app": "^0.1.10" and it's working

[MingyuJeon]

@Tamango92 actually I was using firebase 4.12.1. So it didn't work for me.
But I would solve this issue @zverbeta 's solution.
Thank you.

1572 and I sent PR about this.

[Tamango92]

It worked for me, but with ‘npm cache clean’ before installing

[okeefem2]

I can confirm this worked for me as well.

[madhu72]

Compiling successfully but, getting issue with Google Authentication Provider

ERROR TypeError: Cannot read property 'GoogleAuthProvider' of undefined

[MingyuJeon]

@madhu72
I guess you need to change angular version.
Here's my package.json.
I also got the same issue, but after I downgraded angular version, it was solved.

  "dependencies": {
    "@angular/animations": "^5.2.9",
    "@angular/cdk": "^5.2.4",
    "@angular/common": "^5.2.0",
    "@angular/compiler": "^5.2.0",
    "@angular/core": "^5.2.0",
    "@angular/flex-layout": "^5.0.0-beta.13",
    "@angular/forms": "^5.2.0",
    "@angular/http": "^5.2.0",
    "@angular/material": "^5.2.4",
    "@angular/platform-browser": "^5.2.0",
    "@angular/platform-browser-dynamic": "^5.2.0",
    "@angular/router": "^5.2.0",
    "angularfire2": "^5.0.0-rc.6.0",
    "core-js": "^2.4.1",
    "firebase": "^4.13.1",
    "hammerjs": "^2.0.8",
    "rxjs": "^5.5.6",
    "zone.js": "^0.8.19"
  },
  "devDependencies": {
    "@angular/cli": "~1.7.1",
    "@angular/compiler-cli": "^5.2.0",
    "@angular/language-service": "^5.2.0",
    "@types/jasmine": "~2.8.3",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "^4.0.1",
    "jasmine-core": "~2.8.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~2.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~4.1.0",
    "tslint": "~5.9.1",
    "typescript": "~2.5.3"
  }

[Guhanganesan]

import { InjectionToken } from '@angular/core';
import { FirebaseAppConfig } from './';
import { FirebaseApp as FBApp } from '@firebase/app-types';
import { FirebaseAuth } from '@firebase/auth-types';
import { FirebaseDatabase } from '@firebase/database-types';
import { FirebaseMessaging } from '@firebase/messaging-types';
import { FirebaseStorage } from '@firebase/storage-types';
import { FirebaseFirestore } from '@firebase/firestore-types';
export declare const FirebaseAppConfigToken: InjectionToken;
export declare class FirebaseApp implements FirebaseApp { // FBApp to FirebaseApp
name: string;
options: {};
auth: () => FirebaseAuth;
database: () => FirebaseDatabase;
messaging: () => FirebaseMessaging;
storage: () => FirebaseStorage;
delete: () => Promise;
firestore: () => FirebaseFirestore;
}
export declare function _firebaseAppFactory(config: FirebaseAppConfig, appName?: string): FirebaseApp;
/// change in firebase.app.module.d.ts

[qorbani]

Simple 1-line patch for lazy people like 😊

sed -i.bak 's|^}$| automaticDataCollectionEnabled: false;}|' node_modules/angularfire2/firebase.app.module.d.ts

[opiepj]

@Tamango92 Downgraded, but facing more issues

1. npm cache clean
2.

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

Now I'm asked to install all @firebase modules, for example:

[11:08:28]  typescript: node_modules/angularfire2/firestore/observable/fromRef.d.ts, line: 1 
            Cannot find module '@firebase/firestore-types'. 

       L1:  import { DocumentReference, Query, QuerySnapshot, DocumentSnapshot } from '@firebase/firestore-types';
       L2:  import { Observable } from 'rxjs/Observable';

[opiepj]

I fixed it by installing

    "@firebase/app": "0.1.10",
    "@firebase/auth": "0.4.1",
    "@firebase/database": "0.2.1",
    "@firebase/firestore": "0.3.7",
    "@firebase/functions": "0.1.0",
    "@firebase/messaging": "0.2.3",
    "@firebase/polyfill": "0.3.0",
    "@firebase/storage": "0.1.8",

which seems kind of stupid... not sure why firebase isn't resolving these dependencies

[madhu72]

@Patrick
Do you able to sucessfully connect after these installations?

Thanks and Regards,
Venkateswararao Thota

On Mon, Apr 23, 2018 at 11:51 PM, Patrick Opie [e-mail]
wrote:

I fixed it by installing

"@firebase/app": "0.1.10",
"@firebase/auth": "0.4.1",
"@firebase/database": "0.2.1",
"@firebase/firestore": "0.3.7",
"@firebase/functions": "0.1.0",
"@firebase/messaging": "0.2.3",
"@firebase/polyfill": "0.3.0",
"@firebase/storage": "0.1.8",

which seems kind of stupid... not sure why firebase isn't resolving these
dependencies

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/angular/angularfire2/issues/1571#issuecomment-383673936,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AJ2In0z-xjkqMZB1d8ahYkeqkBUWobvaks5trhvFgaJpZM4TdJnM
.

[nguyentk90]

I have seen this change already merged so we need to wait for a new release of angularfire2 on npm.

In the mean time, just update @firebase/app": "0.1.10". It works for me.

[arturasgusevas]

export declare class FirebaseApp implements FBApp {
name: string;
options: {};
automaticDataCollectionEnabled: boolean; // this is the missing line
auth: () => FirebaseAuth;
database: () => FirebaseDatabase;
messaging: () => FirebaseMessaging;
storage: () => FirebaseStorage;
delete: () => Promise;
firestore: () => FirebaseFirestore;}
also: npm i -S @firebase/app
source: https://stackoverflow.com/a/49968060/9692516

[cicode225]

Same issue solved as suggested above...
At first, I had :

"dependencies": {
     "firebase":"^4.13.1",
     "angularfire2":"^5.0.0-rc.6"
}

Then after visiting here I did :

1. npm uninstall firebase
2. npm cache clean --force
3. npm install [email protected]

As a result, it all works well for me. I got :

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

[junweipan]

It is worked for @cicode225 ,Thanks a lot
Same issue solved as suggested above...
At first, I had :

"dependencies": {
"firebase":"^4.13.1",
"angularfire2":"^5.0.0-rc.6"
}
Then after visiting here I did :

npm uninstall firebase
npm clean cache --force
npm install [email protected]
As a result, it all works well for me. I got :

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

[yuehernkang]

@cicode225 thanks it work

[torresdaniel11]

@cicode225 Thank you!!! solved mi problem

[tecxperts]

@cicode225 works fine thanks.....but i had to use 'npm cache clean --force' :)

[josephprasanth]

Thank you cicode225 .... This saved my work

[opiepj]

@cicode225 nice!