Angularfire: [ERROR] Class 'FirebaseApp' incorrectly implements interface 'App'

[oTTa]

$ ionic cordova run browser
Running app-scripts build: --platform browser --target cordova
[21:14:15] build dev started ...
[21:14:15] clean started ...
[21:14:15] clean finished in 4 ms
[21:14:15] copy started ...
[21:14:15] deeplinks started ...
[21:14:15] deeplinks finished in 180 ms
[21:14:15] transpile started ...
[21:14:20] typescript: ...a/mobile/bahiadeportes-mobile/node_modules/angularfire2/firebase.app.module.d.ts, line: 5
Class 'FirebaseApp' incorrectly implements interface 'App'. Property 'firestore' is missing in type
'FirebaseApp'.

   L4:  export declare const FirebaseAppConfigToken: InjectionToken<FirebaseAppConfig>;
   L5:  export declare class FirebaseApp implements firebase.app.App {
   L6:      name: string;

[21:14:20] typescript: ...a/mobile/bahiadeportes-mobile/node_modules/angularfire2/firebase.app.module.d.ts, line: 12
Namespace 'firebase' has no exported member 'Promise'.

  L11:      storage: () => firebase.storage.Storage;
  L12:      delete: () => firebase.Promise<any>;

Error: Failed to transpile program
at new BuildError (\mobile\bahiadeportes-mobile\node_modules\@ionic\app-scripts\dist\util\errors.js:16:28)
at \mobile\bahiadeportes-mobile\node_modules\@ionic\app-scripts\dist\transpile.js:159:20
at Promise ()
at transpileWorker (\mobile\bahiadeportes-mobile\node_modules\@ionic\app-scripts\dist\transpile.js:107:12)
at Object.transpile (\mobile\bahiadeportes-mobile\node_modules\@ionic\app-scripts\dist\transpile.js:64:12)
at \mobile\bahiadeportes-mobile\node_modules\@ionic\app-scripts\dist\build.js:109:82
at
[21:14:20] copy finished in 5.56 s

package.json

{
"name": "bahiadeportes",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"private": true,
"scripts": {
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"lint": "ionic-app-scripts lint",
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve"
},
"config": {
"ionic_copy": "./config/copy.config.js"
},
"dependencies": {
"@angular/common": "4.4.4",
"@angular/compiler": "4.4.4",
"@angular/compiler-cli": "^4.4.6",
"@angular/core": "4.4.4",
"@angular/forms": "4.4.4",
"@angular/http": "4.4.4",
"@angular/platform-browser": "4.4.4",
"@angular/platform-browser-dynamic": "4.4.4",
"@angular/tsc-wrapped": "^4.4.6",
"@ionic-native/app-version": "^4.4.0",
"@ionic-native/core": "^4.4.0",
"@ionic-native/device": "^4.4.0",
"@ionic-native/firebase": "^4.4.0",
"@ionic-native/network": "^4.4.0",
"@ionic-native/splash-screen": "4.3.2",
"@ionic-native/status-bar": "4.3.2",
"@ionic/storage": "2.0.1",
"angularfire2": "^5.0.0-rc.0-next",
"cordova-browser": "5.0.1",
"cordova-plugin-device": "^1.1.7",
"cordova-plugin-firebase": "^0.1.24",
"cordova-plugin-ionic-webview": "^1.1.16",
"cordova-plugin-splashscreen": "^4.1.0",
"cordova-plugin-whitelist": "^1.3.3",
"firebase": "^4.6.2",
"font-awesome": "^4.7.0",
"ionic-angular": "3.8.0",
"ionic-native": "^2.9.0",
"ionic-plugin-keyboard": "^2.2.1",
"ionicons": "3.0.0",
"node-pre-gyp": "^0.6.39",
"promise-polyfill": "^6.0.2",
"rxjs": "5.4.3",
"sw-toolbox": "3.6.0",
"tsickle": "^0.25.0",
"tsutils": "^2.12.2",
"zone.js": "0.8.18"
},
"devDependencies": {
"@angular/cli": "^1.5.0",
"@ionic/app-scripts": "^3.1.0",
"typescript": "^2.6.1"
},
"description": "An Ionic project",
"cordova": {
"plugins": {
"cordova-plugin-firebase": {},
"ionic-plugin-keyboard": {},
"cordova-plugin-whitelist": {},
"cordova-plugin-device": {},
"cordova-plugin-splashscreen": {},
"cordova-plugin-ionic-webview": {}
},
"platforms": [
"browser"
]
}
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, LOCALE_ID, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { AngularFireModule } from 'angularfire2';
import { AngularFireAuthModule } from 'angularfire2/auth';
import { HttpModule } from '@angular/http';
import { IonicStorageModule } from '@ionic/storage';

import { AppVersion } from '@ionic-native/app-version';
import { Device } from '@ionic-native/device';
import { Network } from '@ionic-native/network';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { LoginPage } from '../pages/login/login';
import { RegistrarsePage } from '../pages/registrarse/registrarse';

import { NetworkService } from '../services/network.service';
import { SafeHttp } from '../services/safe-http.service';
import { ToastService } from '../services/toast.service';
import { UsuarioService } from '../services/usuario.service';

import { Configuration } from './app.constants';

@NgModule({
declarations: [
MyApp,
HomePage,
LoginPage,
RegistrarsePage,
],
imports: [
AngularFireModule.initializeApp(Configuration.FIREBASE_CONFIG),
AngularFireAuthModule,
BrowserModule,
HttpModule,
IonicModule.forRoot(MyApp),
IonicStorageModule.forRoot()
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage,
RegistrarsePage,
LoginPage,

],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
{ provide: LOCALE_ID, useValue: "es-AR" },
UsuarioService,
NetworkService,
SafeHttp,
ToastService,
AppVersion,
Device,
Network,

]
})
export class AppModule {}

EXECUTE ionic serve -> same problem

[davideast]

@oTTa Make sure you are on AngularFire 5.0.0-rc.3. You're likely on rc.0 and Firebase ^4.6.0 which are incompatible.

[jonathansimonet]

Thanks @davideast

[PivitParkour94]

Just to be super clear, the AngularFire 5.0.0-rc.3 is incompatible with any version of firebase greater than 4.6.0 (which technically would be an incompatibility change resulting in Firebase 5.0.0 but I digress). A working solution is to edit the package.json file and make sure the config is as follows
"angularfire2": "5.0.0-rc.3", "firebase": "4.6.0",

Then simply running npm install sorts out the dependencies and the issue vanishes! Thanks heaps for the insight everyone

[markhoward02]

PivitParkour94... I could cry.... I was about to give up until I saw this comment!

Another note to add...
First delete your node_modules folder, then npm cache clean, then npm install, (then ionic build).

[amolumesh12]

@markhoward02 after deleting node_module folder ..while performing npm cache clean it gives me error like this " G:\ion\shoplist>npm cache clean
npm ERR! As of npm@5, the npm cache self-heals from corruption issues and data extracted from the cache is guaranteed to be valid. If you want to make sure everything is consistent, use 'npm cache verify' instead.".

[amolumesh12]

and after trying npm install it gives me this error
Module '"G:/ion/shoplist/node_modules/angularfire2/database/index"' has no exported member 'FirebaseObjectObservable'

[amolumesh12]

@PivitParkour94 your solution work for me ..but it gives me other error in my project

node_modules/angularfire2/database/index"' has no exported member 'FirebaseListObservable'.

import { AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database';

[androidovshchik]

Below versions fix this error for me

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

[MichaelHuy]

@androidovshchik .Thanks.

[androidovshchik]

@MichaelHuy
I have met twice this issue
In both cases the solution works like a magic for me haha
I wonder will it be solved sometime?

[yaseleylo123]

I still have the Error:
ERROR in ...node_modules/angularfire2/firebase.app.module.d.ts (10,22): Class 'FirebaseApp' incorrectly implements class 'FirebaseApp'. Did you mean to extend 'FirebaseApp' and inherit its members as a subclass? Property 'automaticDataCollectionEnabled' is missing in type 'FirebaseApp'. ERROR in Error: Metadata version mismatch for module .../node_modules/angularfire2/index.d.ts, found version 4, expected 3, resolving symbol AppModule in ....
And here is the dependencies section of my package.json file:

"dependencies": { "@angular/animations": "^4.0.0", "@angular/cdk": "^2.0.0-beta.12", "@angular/common": "^4.0.0", "@angular/compiler": "^4.0.0", "@angular/core": "^4.0.0", "@angular/forms": "^4.0.0", "@angular/http": "^4.0.0", "@angular/material": "^2.0.0-beta.12", "@angular/platform-browser": "^4.0.0", "@angular/platform-browser-dynamic": "^4.0.0", "@angular/platform-server": "^4.0.0", "@angular/router": "^4.0.0", "@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.6", "angular-material": "^1.1.8", "angular2-jwt": "^0.2.3", "angularfire2": "^5.0.0-rc.6.0", "auth0-js": "^8.10.1", "bcryptjs": "^2.4.3", "body-parser": "^1.17.2", "bootstrap": "^4.0.0-alpha.6", "bunyan": "^1.8.12", "concurrently": "^3.5.0", "core-js": "^2.4.1", "dotenv": "^4.0.0", "express": "^4.15.4", "firebase": "^4.12.1", "jsonwebtoken": "^7.4.2", "mongoose": "^4.11.6", "morgan": "^1.8.2", "multer": "^1.3.0", "ng2-file-upload": "^1.2.1", "nodemailer": "^4.0.1", "rxjs": "^5.4.2", "zone.js": "^0.8.4" }, "devDependencies": { "@angular/cli": "^1.7.4", "@angular/compiler-cli": "^4.4.7", "@types/jasmine": "2.5.38", "@types/node": "^6.0.106", "codelyzer": "~2.0.0", "install-peers": "^1.0.2", "jasmine-core": "~2.5.2", "jasmine-spec-reporter": "~3.2.0", "karma": "~1.4.1", "karma-chrome-launcher": "~2.0.0", "karma-cli": "~1.0.1", "karma-coverage-istanbul-reporter": "^0.2.0", "karma-jasmine": "^1.1.1", "karma-jasmine-html-reporter": "^0.2.2", "protractor": "~5.1.0", "ts-node": "~2.0.0", "tslint": "~4.5.0", "typescript": "^2.8.3" }

So the fix of @androidovshchik didnt work in my case. Do u have an idea ?

[victorvsantos]

@yaseleylo123 hey, try this:

npm install @firebase/app@^0.1.6 --save

[yaseleylo123]

@victorvsantos
getting this error now:

ERROR in Error: Metadata version mismatch for module .../node_modules/angularfire2/index.d.ts, found version 4, expected 3, resolving symbol AppModule in .../src/app/app.module.ts, resolving symbol AppModule in .../src/app/app.module.ts, resolving symbol AppModule in .../src/app/app.module.ts

[yaseleylo123]

SOLVED:

1. update latest @angular/common, compiler-cli, core, compiler
2. rxjs update on 5.5.5
3. build in production mode

[androidovshchik]

[pookdeveloper]

import this:

import firebase from 'firebase/app';

its work for me

[Ahkam95]

try this one. it might work for you.
npm install -s [email protected]
[email protected]

then run ionic serve

[vmasek]

updating the angularfire2 to next helped me npm i --save angularfire2@next

"angularfire2": "^5.0.0-rc.7.0-next",
"firebase": "^4.13.1",

This has worked even without adding a @firebase/app as a direct dependency.

There might be a warning about a future deprecation of dates (if you are using updated_at or created_at), but it is easy to cover that.

[millbj92]

Just add the automaticDataCollectionEnabled property to the FirebaseApp class.

export declare class FirebaseApp implements _FirebaseApp {
    name: string;
    options: {};
    auth: () => FirebaseAuth;
    database: (databaseURL?: string) => FirebaseDatabase;
    messaging: () => FirebaseMessaging;
    storage: (storageBucket?: string) => FirebaseStorage;
    delete: () => Promise<void>;
    firestore: () => FirebaseFirestore;
    automaticDataCollectionEnabled: false;        // <-- Add this line.
}

[souhailmerroun]

@Ahkam95 solution works for me.

[alfinlorence]

@millbj92 Thanks man

[xonex1208]

@millbj92 Thanks, It works.

[asrar7]

Hi everyone.
I have the same error plz anyone help me . thanks

class FirebaseApp.docx

[asrar7]

It works now. But now have another error in app/app.module.ts;
import { AngularFireDatabase } from 'angularfire2/database';
'AngularFireDatabase' is declared but its value is never used.
@PivitParkour94 @davideast @xonex1208 @souhailmerroun @millbj92 @jonathansimonet

[androidovshchik]

@asrar7
Removing unused import will be solution? :)

[asrar7]

@souhailmerroun @Ahkam95 @millbj92 now i have this below problem

[pookdeveloper]

@asrar7 did you add in providers in file app.module.ts ?

[Rosso84]

@PivitParkour94 i could kiss you.. i have been dealing with this hell for 3 weeks now,,.. thank you mate.

[jbistis]

David, just had to upgrade firebase for firebase.firestore.FieldValue.increment and this issue is back. Using "angularfire2": "^5.2.1", "@firebase/app": "^0.4.6", "@firebase/firestore": "^1.4.1" and

error message ERROR in node_modules/@angular/fire/firebase.app.module.d.ts(17,22): error TS2420: Class 'FirebaseApp' incorrectly implements interface 'App'.
Type 'FirebaseApp' is missing the following properties from type 'App': installations, performance, Any ideas what versions are conflicting?

[YECAPP]

Fixed when run this command

npm install firebase @angular/fire --save

and this

npm install -S firebase@latest