node.js - 未捕获的类型错误 : _firebase_app__WEBPACK_IMPORTED_MODULE_0___default. a.registerVersion 不是 IONIC v4 中的函数

Question

问题

运行/部署应用程序时( ionic 服务)在控制台中看到这个错误

Uncaught TypeError: _firebase_app__WEBPACK_IMPORTED_MODULE_0___default.a.registerVersion is not a function
    at auth.esm.js:372
    at auth.esm.js:372
    at Module.<anonymous> (auth.esm.js:372)
    at Module../node_modules/@firebase/auth/dist/auth.esm.js (auth.esm.js:374)
    at __webpack_require__ (bootstrap:83)
    at Module../node_modules/firebase/auth/dist/index.esm.js (index.esm.js:1)
    at __webpack_require__ (bootstrap:83)
    at Module../node_modules/@angular/fire/auth/auth.module.js (auth.module.js:1)
    at __webpack_require__ (bootstrap:83)
    at Module../node_modules/@angular/fire/auth/public_api.js (public_api.js:1)

auth.esm.js 文件在文件末尾显示了这行带有错误的代码

;firebase.registerVersion("@firebase/auth","0.13.3");firebase.INTERNAL.extendNamespace({User:Q})}else throw Error("Cannot find the firebase namespace; be sure to include firebase-app.js before this library.");})();}).apply(typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : typeof window !== 'undefined' ? window : {});

环境

Ionic:

   Ionic CLI                     : 5.4.13 (C:\xxxx\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.11.7
   @angular-devkit/build-angular : 0.12.4
   @angular-devkit/schematics    : 7.2.4
   @angular/cli                  : 7.2.4
   @ionic/angular-toolkit        : 1.2.3

Cordova:

   Cordova CLI       : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms : android 8.1.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 2.5.3, (and 11 other plugins)

Utility:

   cordova-res : 0.8.1
   native-run  : 0.3.0

System:

   Android SDK Tools : 26.1.1 (E:\ANDROID_SDK)
   NodeJS            : v12.14.0 (C:\Program Files\nodejs\node.exe)
   npm               : 6.13.4
   OS    

        : Windows 10

已更新webpack.config.js.

const path = require('path');
const webpack = require('webpack');

module.exports = {
    plugins: [
        new webpack.ProvidePlugin({
            'window.SQL': 'sql.js/js/sql.js'
        }),
        new webpack.NormalModuleReplacementPlugin(/typeorm$/, function (result) {
            result.request = result.request.replace(/typeorm/, "typeorm/browser");
        }),
        new webpack.ContextReplacementPlugin(
            /\/package-name\//,
            (data) => {
                delete data.dependencies[0].critical;
                return data;
            },
        ),
        // new webpack.ContextReplacementPlugin(/\@angular(\\|\/)core(\\|\/)esm5/, path.join(__dirname, './client'))
    ],
    node: {
        fs: 'empty',
        net: 'empty',
        tls: 'empty'
    },
    optimization: {
        minimize: false
    },
    externals: {
        'react-native-sqlite-storage': 'react-native-sqlite-storage'
    }
};

package.json

{
  "name": "xxx.xxxxx",
  "version": "1.0.0",
  "author": "xxxx",
  "homepage": "https://xxxx.com.ar/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^7.2.2",
    "@angular/common": "^7.2.2",
    "@angular/core": "^7.2.2",
    "@angular/fire": "^5.3.0",
    "@angular/forms": "^7.2.2",
    "@angular/http": "^7.2.2",
    "@angular/material": "^7.2.2",
    "@angular/platform-browser": "^7.2.2",
    "@angular/platform-browser-dynamic": "^7.2.2",
    "@angular/router": "^7.2.2",
    "@firebase/app": "^0.4.25",
    "@firebase/polyfill": "^0.3.29",
    "@ionic-native/app-version": "5.17.0",
    "@ionic-native/camera": "^5.17.0",
    "@ionic-native/core": "^5.17.0",
    "@ionic-native/device": "^5.17.0",
    "@ionic-native/fcm": "^5.19.0",
    "@ionic-native/file": "^5.17.0",
    "@ionic-native/geolocation": "^5.17.0",
    "@ionic-native/google-plus": "^5.17.0",
    "@ionic-native/image-resizer": "4.17.0",
    "@ionic-native/native-audio": "^5.17.0",
    "@ionic-native/splash-screen": "^5.17.0",
    "@ionic-native/status-bar": "^5.17.0",
    "@ionic-native/unique-device-id": "^5.17.0",
    "@ionic/angular": "^4.11.7",
    "@ionic/storage": "2.1.3",
    "@types/googlemaps": "^3.25.36",
    "angular2-uuid": "^1.1.1",
    "bluebird": "^3.5.1",
    "cordova": "^8.1.2",
    "cordova-android": "^8.1.0",
    "cordova-ios": "4.5.5",
    "cordova-plugin-app-version": "^0.1.9",
    "cordova-plugin-browsertab": "^0.2.0",
    "cordova-plugin-buildinfo": "^2.0.3",
    "cordova-plugin-camera": "^4.1.0",
    "cordova-plugin-compat": "^1.2.0",
    "cordova-plugin-device": "^2.0.3",
    "cordova-plugin-fcm-with-dependecy-updated": "^4.1.1",
    "cordova-plugin-file": "^6.0.2",
    "cordova-plugin-geolocation": "^2.4.3",
    "cordova-plugin-googleplayservices": "^19.0.3",
    "cordova-plugin-googleplus": "^5.3.2",
    "cordova-plugin-ionic-keyboard": "^2.2.0",
    "cordova-plugin-ionic-webview": "^2.5.3",
    "cordova-plugin-nativeaudio": "^3.0.9",
    "cordova-plugin-nativestorage": "^2.3.2",
    "cordova-plugin-splashscreen": "^5.0.3",
    "cordova-plugin-statusbar": "^2.4.3",
    "cordova-plugin-uniquedeviceid": "^1.3.2",
    "cordova-plugin-whitelist": "^1.3.4",
    "cordova-sqlite-storage": "^3.4.1",
    "core-js": "^2.5.4",
    "firebase": "^7.5.0",
    "imagemin": "^5.3.1",
    "info.protonet.imageresizer": "^0.1.1",
    "ionic-angular": "^3.9.9",
    "ionicons": "3.0.0",
    "local-storage": "^1.4.2",
    "moment": "^1.7.2",
    "ng-lottie": "^0.3.2",
    "ng2-reactive-forms-validators": "^1.1.0",
    "ng2-translate": "^5.0.0",
    "ngx-mask": "^8.1.6",
    "ngx-mask-ionic": "^1.1.2",
    "q": "^1.5.1",
    "rxjs": "^6.5.3",
    "rxjs-compat": "^6.5.3",
    "sql.js": "^0.5.0",
    "sqlite3": "^4.0.8",
    "sw-toolbox": "3.6.0",
    "tslib": "^1.10.0",
    "typeorm": "^0.2.20",
    "zone.js": "~0.8.29"
  },
  "devDependencies": {
    "@angular-builders/custom-webpack": "^7.2.0",
    "@angular-builders/dev-server": "^7.2.1",
    "@angular-devkit/architect": "~0.12.3",
    "@angular-devkit/build-angular": "^0.12.4",
    "@angular-devkit/core": "~7.2.3",
    "@angular-devkit/schematics": "~7.2.3",
    "@angular/cli": "~7.2.3",
    "@angular/compiler": "~7.2.2",
    "@angular/compiler-cli": "~7.2.2",
    "@angular/language-service": "~7.2.2",
    "@ionic/angular-toolkit": "~1.2.0",
    "@types/file-saver": "^2.0.0",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^10.12.19",
    "codelyzer": "~4.5.0",
    "file-saver": "^2.0.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.1.4",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "node-sass": "^4.13.0",
    "protractor": "~5.4.0",
    "ts-node": "~8.0.0",
    "tslint": "~5.12.0",
    "typescript": "~3.1.6",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.10.1"
  },
  "description": " ",
  "cordova": {
    "plugins": {
      "cordova-plugin-uniquedeviceid": {},
      "cordova-plugin-app-version": {},
      "cordova-sqlite-storage": {},
      "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": {},
      "cordova-plugin-googleplus": {
        "REVERSED_CLIENT_ID": "com.googleusercontent.apps.xxxxx-xxxxxxx",
        "WEB_APPLICATION_CLIENT_ID": "xxxxx-XXXX.apps.googleusercontent.com"
      },
      "cordova-plugin-geolocation": {},
      "cordova-plugin-fcm-with-dependecy-updated": {
        "FCM_CORE_VERSION": "16.0.9",
        "FCM_VERSION": "18.0.0",
        "GRADLE_TOOLS_VERSION": "3.5.0",
        "GOOGLE_SERVICES_VERSION": "4.2.0"
      }
    },
    "platforms": [
      "android"
    ]
  }
}

信息

我唯一看到的是包中@firebase/app 的版本是 ^0.4.25 。在 auth 中版本是 0.13.3

我已经做了什么

• 删除 node_modules 和 package.json-lock 并多次运行 npm i
• 运行 npm 缓存清理 --force

Answer 1

您还可以使用以下步骤在 ionic 中配置 firebase，

npm install @angular/fire firebase --save

一旦安装了 AngularFire(我们将使用该插件将我们的 Ionic 应用程序与 Firebase 通信)，我们需要在 Firebase 中创建一个新项目。要创建项目，请转到 firebase console ，您将在其中看到创建项目的选项:
稍后
我们将指定这些凭证来告诉我们的 Ionic 应用程序与我们的 Firebase 应用程序进行通信。
下一步是将我们的 Firebase 凭据添加到我们的 Ionic 应用程序中。为此，我们将转到我们在上一步中创建的 Ionic 项目，并在位于 src/environments/ 的 environment.ts 文件中添加以下代码:

export const environment = {
 production: false,
 firebase: {
   apiKey: "YOUR_API_KEY",
   authDomain: "YOUR_AUTH_DOMAIN",
   databaseURL: "YOUR_DATABASE_URL",
   projectId: "YOUR_PROJECT_ID",
   storageBucket: "YOUR_STORAGE_BUCKET",
   messagingSenderId: "YOUR_SENDER_ID"
 }
};

请记住，您必须用自己的值替换常量。在您的 app.module.ts

中添加此代码

    import { AngularFireModule  } from '@angular/fire';
    import { AngularFireDatabaseModule } from '@angular/fire/database';
    import { environment } from '../environments/environment';
    @NgModule({
  declarations: [
...
  ],
  imports: [
    ...,
    AngularFireModule.initializeApp(environment.firebase), //add this code 
    AngularFireDatabaseModule  //add this code 
  ],
  providers: [],
  bootstrap: [AppComponent]
})

通过它，您可以使用 firebase 配置您的 ionic 应用程序。