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.

[ar-arkhipov]

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.

[ar-arkhipov]

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

"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';