Ionic 5 angular 在使用标志 --prod 创建构建时触发 AngularFireFunctions 中断

Question

我正在尝试在 Ionic 项目上使用 Angular Fire 调用 firebase 函数。

 const callable = this.afFunctions.httpsCallable('getWeather');
 const result = await callable(request).toPromise();

这在开发环境中工作正常，但在部署时，ionic build --prod --source-map，同样的功能不再工作。

以下是在生产中调用此函数时的错误。

POST https://firebaseinstallations.googleapis.com/v1/projects/ProjectName/installations 400

FirebaseError: Installations: Create Installation request failed with error "400 INVALID_ARGUMENT: Request contains an invalid argument."

这里指的是什么无效参数？

对于上下文，对这个项目的依赖是，

"dependencies": {
    "@angular/cdk": "^9.2.4",
    "@angular/common": "~9.1.6",
    "@angular/core": "~9.1.6",
    "@angular/fire": "^6.0.0",
    "@angular/flex-layout": "^9.0.0-beta.31",
    "@angular/forms": "~9.1.6",
    "@angular/platform-browser": "^9.1.11",
    "@angular/platform-browser-dynamic": "^9.1.11",
    "@angular/pwa": "^0.901.8",
    "@angular/router": "~9.1.6",
    "@angular/service-worker": "^9.1.11",
    "@capacitor/android": "^2.2.0",
    "@capacitor/core": "2.2.0",
    "@capacitor/ios": "^2.2.0",
    "@codetrix-studio/capacitor-google-auth": "^2.1.1",
    "@firebase/app": "^0.6.5",
    "@ionic-native/core": "^5.0.7",
    "@ionic-native/header-color": "^5.26.0",
    "@ionic-native/sign-in-with-apple": "^5.26.0",
    "@ionic-native/splash-screen": "^5.0.0",
    "@ionic-native/status-bar": "^5.0.0",
    "@ionic/angular": "^5.0.0",
    "@ionic/pro": "^2.0.4",
    "@ionic/pwa-elements": "^1.5.2",
    "@rdlabo/capacitor-facebook-login": "^2.0.3",
    "@zxing/library": "^0.17.0",
    "@zxing/ngx-scanner": "^3.0.0",
    "capacitor-fcm": "^2.0.0",
    "chart.js": "^2.9.3",
    "cordova-android": "^8.1.0",
    "cordova-ios": "^6.0.0",
    "cordova-plugin-headercolor": "^1.0.0",
    "cordova-plugin-ionic": "^5.4.7",
    "cordova-plugin-ionic-keyboard": "^2.2.0",
    "cordova-plugin-sign-in-with-apple": "^0.1.1",
    "cordova-plugin-splashscreen": "^5.0.4",
    "cordova-plugin-whitelist": "^1.3.4",
    "core-js": "^2.6.9",
    "date-fns": "^1.30.1",
    "firebase": "^7.15.1",
    "firebase-admin": "^8.12.1",
    "libphonenumber-js": "^1.7.52",
    "ng-circle-progress": "^1.5.1",
    "ng2-charts": "^2.3.2",
    "ng2-dragula": "^2.1.1",
    "ng2-odometer": "^1.1.3",
    "rxjs": "^6.5.5",
    "stripe": "^7.9.1",
    "trackjs": "^3.3.0",
    "tslib": "^1.9.0",
    "zone.js": "^0.10.3"
  },
  "devDependencies": {
    "@angular-devkit/architect": "^0.901.8",
    "@angular-devkit/build-angular": "^0.901.8",
    "@angular-devkit/core": "^9.1.8",
    "@angular-devkit/schematics": "^9.1.8",
    "@angular/cli": "~9.1.5",
    "@angular/compiler": "~9.1.6",
    "@angular/compiler-cli": "~9.1.6",
    "@angular/language-service": "~9.1.6",
    "@capacitor/cli": "2.2.0",
    "@compodoc/compodoc": "^1.1.11",
    "@ionic/angular-toolkit": "^2.1.1",
    "@ionic/cli": "^6.10.1",
    "@ionic/ng-toolkit": "^1.1.0",
    "@ionic/schematics-angular": "^1.0.7",
    "@types/jasmine": "^3.5.10",
    "@types/jasminewd2": "^2.0.8",
    "@types/node": "^12.11.1",
    "@types/stripe": "^7.13.23",
    "codelyzer": "^5.1.2",
    "cordova-plugin-ionic-webview": "^5.0.0",
    "firebase-tools": "^8.4.2",
    "jasmine-core": "^3.5.0",
    "jasmine-spec-reporter": "^4.2.1",
    "karma": "^5.0.9",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~2.1.0",
    "karma-jasmine": "~3.0.1",
    "karma-jasmine-html-reporter": "^1.5.4",
    "protractor": "~5.4.3",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~3.8.3",
    "webpack-bundle-analyzer": "^3.8.0"
  }

这个 app.module 似乎很好地遵循了 Angular Fire 文档。

imports: [
    BrowserModule,
    FormsModule,
    IonicModule.forRoot(),
    RouterModule.forRoot(routes),
    SharedProvidersModule,
    SharedComponentsModule,
    ModalModule,
    AngularFireModule.initializeApp(environment.firebase, 'PROJECT_NAME'),
    AngularFireFunctionsModule,
    AngularFirestoreModule,
    AngularFireAuthModule,
    AngularFireMessagingModule,
    AngularFireStorageModule,
    AngularFirestoreModule.enablePersistence({ synchronizeTabs: true }),
    ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }),
  ],
  providers: [
    HeaderColor,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],

Answer 1

我能够通过在 Firebase 控制台上创建一个新的网络应用程序来解决这个问题。转到“项目”>“设置”>“添加应用”>“Web”，然后获取该配置并将其放入 app.module 中的 AngularFireModule.initializeApp。

Ionic 5 angular 在使用标志 --prod 创建构建时触发 AngularFireFunctions 中断

Ionic 5 angular fire AngularFireFunctions break when creating a build with the flag --prod

angular

ionic-framework

ionic5