AngularFireFunctions break when creating a build with the flag --prod

I’m trying to call a firebase function using Angular Fire on an Ionic project.

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

This works fine in a development environment but upon deploying with, ionic build --prod --source-map, this same function no longer works.

Here are the errors when this function is called in production.

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."

What invalid argument is being referred to here?

For context the dependences on this project are,

  "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"
      }

This app.module seems to follow the Angular Fire docs fine.

 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 }
      ],

I was able to fix this problem by creating a new web app on the Firebase console. Go to Project > Settings > Add app > Web, then get that config and put it in the AngularFireModule.initializeApp in your app.module.