未找到模块：错误：无法解析“@firebase/app”Ionic Firebase

Posted 2023-03-13

【中文标题】未找到模块：错误：无法解析“@firebase/app”Ionic Firebase

【英文标题】：Module not found: Error: Can't resolve '@firebase/app' Ionic Firebase

【发布时间】：2020-08-20 19:16:50

【问题描述】：

我尝试将 firebase 包含到我的 Ionic 项目中，当我运行该项目时它会抛出这些错误，我看到我已经安装了它们，我遇到的问题是什么，这是我第一次使用火力基地

希望大家能帮我找出错误，谢谢大家 希望大家帮我找出错误，谢谢大家

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

【问题讨论】：

如果您的代码中有类似 ''@angular/fire/firestore/public_api'' 的导入，请尝试替换为 '@angular/fire/firestore'

@Radik 添加我的导入

【参考方案1】：

我认为您应该从 package.json 中删除所有 firebase 库并删除 node_modules

只安装这两个

npm install firebase @angular/fire --save

安装后你可能会遇到兼容性问题，就像这里描述的link with solution

为避免此错误，您必须在 tsconfig.json 中设置一些选项。

tsconfig.json：

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