Module not found: Error: Can't resolve '@firebase/app' Ionic Firebase

Question

I try to include firebase to my Ionic project and it throws these errors when I run the project, and I see that I have them installed, what would be the problem that is happening to me, it is the first time that I use firebase

I hope you can help me find the error, thanks everyone I hope you can help me find the error, thanks everyone

[ng] ERROR in ./node_modules/@angular/fire/fesm2015/angular-fire-firestore.js
[ng] Module not found: Error: Can't resolve '@firebase/app' in 'D:\Proyectos\Ionic\DeliveryPiuraPublic\node_modules\@angular\fire\fesm2015'
[ng] ERROR in ./node_modules/@firebase/firestore/dist/index.cjs.js
[ng] Module not found: Error: Can't resolve '@firebase/app' in 'D:\Proyectos\Ionic\DeliveryPiuraPublic\node_modules\@firebase\firestore\dist'
[ng] ERROR in ./node_modules/@angular/fire/fesm2015/angular-fire.js
[ng] Module not found: Error: Can't resolve 'firebase/app' in 'D:\Proyectos\Ionic\DeliveryPiuraPublic\node_modules\@angular\fire\fesm2015'
[ng] ERROR in ./node_modules/@angular/fire/fesm2015/angular-fire-auth.js
[ng] Module not found: Error: Can't resolve 'firebase/auth' in 'D:\Proyectos\Ionic\DeliveryPiuraPublic\node_modules\@angular\fire\fesm2015'
[ng] ERROR in ./node_modules/@angular/fire/fesm2015/angular-fire-firestore.js
[ng] Module not found: Error: Can't resolve 'firebase/firestore' in 'D:\Proyectos\Ionic\DeliveryPiuraPublic\node_modules\@angular\fire\fesm2015'
[ng] ERROR in ./node_modules/@angular/fire/fesm2015/angular-fire-storage.js
[ng] Module not found: Error: Can't resolve 'firebase/storage' in 'D:\Proyectos\Ionic\DeliveryPiuraPublic\node_modules\@angular\fire\fesm2015'

packege.js

{
      "name": "DeliveryPiuraPublic",
      "version": "0.0.1",
      "author": "Ionic Framework",
      "homepage": "https://ionicframework.com/",
      "scripts": {
        "ng": "ng",
        "start": "ng serve",
        "build": "ng build",
        "test": "ng test",
        "lint": "ng lint",
        "e2e": "ng e2e"
      },
      "private": true,
      "dependencies": {
        "@angular/common": "~8.2.14",
        "@angular/core": "~8.2.14",
        "@angular/fire": "^6.0.0",
        "@angular/forms": "~8.2.14",
        "@angular/platform-browser": "~8.2.14",
        "@angular/platform-browser-dynamic": "~8.2.14",
        "@angular/router": "~8.2.14",
        "@firebase/auth": "^0.14.4",
        "@firebase/auth-types": "^0.10.0",
        "@firebase/firestore": "^1.14.2",
        "@ionic-native/core": "^5.0.7",
        "@ionic-native/splash-screen": "^5.0.0",
        "@ionic-native/status-bar": "^5.0.0",
        "@ionic/angular": "^5.0.0",
        "@types/lodash": "^4.14.150",
        "cordova-android": "8.1.0",
        "core-js": "^2.5.4",
        "rxjs": "~6.5.1",
        "tslib": "^1.9.0",
        "zone.js": "~0.9.1"
      },
      "devDependencies": {
        "@angular-devkit/build-angular": "~0.803.20",
        "@angular/cli": "~8.3.23",
        "@angular/compiler": "~8.2.14",
        "@angular/compiler-cli": "~8.2.14",
        "@angular/language-service": "~8.2.14",
        "@ionic/angular-toolkit": "^2.1.1",
        "@types/jasmine": "~3.3.8",
        "@types/jasminewd2": "~2.0.3",
        "@types/node": "~8.9.4",
        "codelyzer": "^5.0.0",
        "cordova-plugin-device": "^2.0.2",
        "cordova-plugin-ionic-keyboard": "^2.2.0",
        "cordova-plugin-ionic-webview": "^4.2.1",
        "cordova-plugin-splashscreen": "^5.0.2",
        "cordova-plugin-statusbar": "^2.4.2",
        "cordova-plugin-whitelist": "^1.3.3",
        "jasmine-core": "~3.4.0",
        "jasmine-spec-reporter": "~4.2.1",
        "karma": "~4.1.0",
        "karma-chrome-launcher": "~2.2.0",
        "karma-coverage-istanbul-reporter": "~2.0.1",
        "karma-jasmine": "~2.0.1",
        "karma-jasmine-html-reporter": "^1.4.0",
        "protractor": "~5.4.0",
        "ts-node": "~7.0.0",
        "tslint": "~5.15.0",
        "typescript": "~3.4.3"
      },
      "description": "An Ionic project",
      "cordova": {
        "plugins": {
          "cordova-plugin-whitelist": {},
          "cordova-plugin-statusbar": {},
          "cordova-plugin-device": {},
          "cordova-plugin-splashscreen": {},
          "cordova-plugin-ionic-webview": {
            "ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
          },
          "cordova-plugin-ionic-keyboard": {}
        },
        "platforms": [
          "android"
        ]
      }
    }

app.module.ts

// firebase
import Config from './firebase';
import { AngularFireModule } from '@angular/fire';
import { AngularFireAuthModule } from '@angular/fire/auth';
import { AngularFireStorageModule } from '@angular/fire/storage';
import { AngularFirestoreModule } from '@angular/fire/firestore';

if you have in your code imports like this ''@angular/fire/firestore/public_api'' try to replace with '@angular/fire/firestore' — Radik
– Radik, Commented May 5, 2020 at 23:48

Radik · Accepted Answer · 2020-05-06 00:37:17Z

2

i think you should remove all firebase libraries from package.json and delete node_modules

and install only these two

npm install firebase @angular/fire --save

after installing you can face with compatibility issue, like described here link with solution

To avoid this error you have to set some options in tsconfig.json.

tsconfig.json:

{
  //...
  compilerOptions: {
    "skipLibCheck": true,
    //...
  }
}

edited May 6, 2020 at 0:37

answered May 6, 2020 at 0:29

Radik

2,7931 gold badge23 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Module not found: Error: Can't resolve '@firebase/app' Ionic Firebase

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related