ERROR Class 'FirebaseApp' incorrectly implements interface 'App'

6
votes

Trying to serve up my angularCLI and Firebase resulted in this error... What do I do?

ERROR in node_modules/angularfire2/app/firebase.app.module.d.ts(5,22): error TS2420: Class 'FirebaseApp' incorrectly implements interface 'App'. Property 'firestore' is missing in type 'FirebaseApp'. node_modules/angularfire2/app/firebase.app.module.d.ts(12,28): error TS2694: Namespace 'firebase' has no exported member 'Promise'. node_modules/angularfire2/database/firebase_list_observable.d.ts(14,62): error TS2694: Namespace 'firebase' has no exported member 'Promise'. node_modules/angularfire2/database/firebase_list_observable.d.ts(15,48): error TS2694: Namespace 'firebase' has no exported member 'Promise'. node_modules/angularfire2/database/firebase_list_observable.d.ts(16,92): error TS2694: Namespace 'firebase' has no exported member 'Promise'. node_modules/angularfire2/database/firebase_object_observable.d.ts(11,31): error TS2694: Namespace 'firebase' has no exported member 'Promise'. node_modules/angularfire2/database/firebase_object_observable.d.ts(12,37): error TS2694: Namespace 'firebase' has no exported member 'Promise'. node_modules/angularfire2/database/firebase_object_observable.d.ts(13,24): error TS2694: Namespace 'firebase' has no exported member 'Promise'. node_modules/angularfire2/interfaces.d.ts(12,32): error TS2694: Namespace 'firebase' has no exported member 'Promise'. node_modules/angularfire2/interfaces.d.ts(13,35): error TS2694: Namespace 'firebase' has no exported member 'Promise'. node_modules/angularfire2/interfaces.d.ts(14,35): error TS2694: Namespace 'firebase' has no exported member 'Promise'. node_modules/angularfire2/interfaces.d.ts(15,44): error TS2694: Namespace 'firebase' has no exported member 'Promise'.

webpack: Failed to compile.

package.json

{
  "name": "oshop",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.2.0",
    "@angular/common": "^5.2.0",
    "@angular/compiler": "^5.2.0",
    "@angular/core": "^5.2.0",
    "@angular/forms": "^5.2.0",
    "@angular/http": "^5.2.0",
    "@angular/platform-browser": "^5.2.0",
    "@angular/platform-browser-dynamic": "^5.2.0",
    "@angular/router": "^5.2.0",
    "@ng-bootstrap/ng-bootstrap": "^1.0.0",
    "angularfire2": "^4.0.0-rc.1",
    "bootstrap": "^4.0.0",
    "core-js": "^2.4.1",
    "firebase": "^4.9.1",
    "rxjs": "^5.5.6",
    "zone.js": "^0.8.19"
  },
  "devDependencies": {
    "@angular/cli": "^1.6.7",
    "@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"
  },
  "description": "This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.6.7.",
  "main": "karma.conf.js",
  "author": "",
  "repository": {
    "type": "git",
    "url": "imnickvaughn"
  }
}
8
angularfirebasenpm
The first thing you should do Is share the code where you are setting up firebase as it is impossible to give you an answer without see what you are doing – nicowernli
I just wanted to post my solution for others... I am hoping they'll find this when they search the error I posted and then try out my solutions. Ill put in my package.json though – imnickvaughn

8 Answers

8
votes

You should first try: (if you have your angular cli and firebase installed)

  1. In terminal type: npm install -S angularfire2@latest

once you do this your angularfire2 will read: "angularfire2": "^5.0.0-rc.6",

...and thats it

If that's not enough look at these sources and try... https://github.com/angular/angularfire2/issues/1338 https://github.com/angular/angular-cli/issues/4391

npm uninstall -g angular-cli
npm cache clean
npm install -g @angular/cli@latest

rm -rf node_modules dist
npm uninstall --save-dev angular-cli
npm install --save-dev @angular/cli@latest
npm install
ng update [this wasn't working so I just changed it to ng init I believe]

npm install -g firebase-tools
npm install -S angularfire2@latest

Using the above advice and reinstalling all dependencies also works for this problem... npm WARN deprecated [email protected]: use uuid module instead https://github.com/kelektiv/node-uuid/issues/155

...Also the firebase command wouldn't work in my oh-my-zsh until I typed exactly:

npm install -S -D -g firebase-tools

Into vs code terminal.

Hopefully this saves someone an hour or five...

3
votes

for me fix was changing FirebaseApp class to : 

export declare class FirebaseApp implements FBApp {
name: string;
options: {};
auth: () => FirebaseAuth;
database: () => FirebaseDatabase;
messaging: () => FirebaseMessaging;
storage: () => FirebaseStorage;
delete: () => Promise<any>;
firestore: () => FirebaseFirestore;
automaticDataCollectionEnabled:boolean
}
2
votes

I just added automaticDataCollectionEnabled:boolean in class FirebaseApp.

It's work for me.

2
votes

do some changes in package json

"angularfire2": "^5.0.0-rc.6.0", "firebase": "^4.12.1"

2
votes

Just downgrade firebase version using the following:

First, go to your project directory and then this command

 npm install --save [email protected].*

it worked for me.

0
votes

Solution():

install this command in your firebase project

npm i --save [email protected] [email protected]

it will work.

0
votes

I used this

export declare class FirebaseApp implements app.App {
    installations(): import("firebase").installations.Installations;
    performance(): import("firebase").performance.Performance;
    remoteConfig(): import("firebase").remoteConfig.RemoteConfig;
    analytics(): import("firebase").analytics.Analytics;
    name: string;
    options: {};
    auth: () => FirebaseAuth;
    database: (databaseURL?: string) => FirebaseDatabase;
    messaging: () => FirebaseMessaging;
    storage: (storageBucket?: string) => FirebaseStorage;
    delete: () => Promise<void>;
    firestore: () => FirebaseFirestore;
    functions: (region?: string) => FirebaseFunctions;
}
-1
votes

You getting below error ?

ERROR in node_modules/angularfire2/app/firebase.app.module.d.ts(5,22)

webpack: Failed to compile.

Please don't do anything, just install latest version of angularfire2 npm install -S angularfire2@latest