开发模式下Angular HttpClient Observable不发射值，生产模式正常

调用部署在Firebase Cloud Function中的Express接口时出现异常：

• 使用Angular HttpClient编写的GET请求，Chrome网络面板和Firebase日志均显示请求成功且已收到响应，但对应的Observable既不发射值也不抛出错误
• 该问题仅出现在开发模式；部署到Firebase Hosting的生产环境则运行正常
• 改用Fetch API实现相同请求逻辑，在开发和生产模式下均能正常工作

已尝试以下操作但未解决问题：

• 将Angular从v15升级至16.1.3
• 更新所有依赖包
• 删除并重新安装node_modules

Angular HttpClient 请求代码 #

checkContactExistByEmail(email: string): Promise<boolean> {
  const url = `${CRM_API_URL}/${CRM_API_ENDPOINTS.checkContactExistByEmail}`;

  return firstValueFrom(
    this.http.get<boolean>(url, { params: { email } })
     .pipe(
        catchError((err: any) => {
           console.error({ err });
           throw new Error(err.message);
            })
       )
    );
}

Fetch API 请求代码 #

const url = new URL(`${CRM_API_URL}/${CRM_API_ENDPOINTS.checkContactExistByEmail}`);
url.search = new URLSearchParams({ email }).toString();
const options = {
    method: 'GET',
    url,
    headers: {
        'Content-Type': 'application/json',
    },
};
try {
    const response = await fetch(url, options);
    if (response.status !== 200) throw new Error(await response.text());
    return await response.json();
} catch (error: any) {
    console.log({ error });
    throw new Error(error.message);
}

package.json 配置 #

{
    "name": "scbweb-web",
    "version": "2.0.0",
    "scripts": {
        "ng": "ng",
        "ver": "node ./npm_scripts/version-increase.js",
        "start": "ng serve --port 6100 --configuration development",
        "build": "ng build --configuration production",
        "build-map": "ng build --configuration production --source-map=true --named-chunks=true",
        "explore-bundle": "source-map-explorer dist/**/*.js",
        "b-d": "ng build --configuration production && firebase deploy --only hosting",
        "test": "ng test",
        "lint": "ng lint",
        "e2e": "ng e2e"
    },
    "private": true,
    "dependencies": {
        "@angular/animations": "^16.1.3",
        "@angular/cdk": "^16.1.3",
        "@angular/common": "^16.1.3",
        "@angular/compiler": "^16.1.3",
        "@angular/core": "^16.1.3",
        "@angular/forms": "^16.1.3",
        "@angular/localize": "^16.1.3",
        "@angular/platform-browser": "^16.1.3",
        "@angular/platform-browser-dynamic": "^16.1.3",
        "@angular/router": "^16.1.3",
        "@iharbeck/ngx-virtual-scroller": "^15.2.0",
        "animate.css": "^4.1.1",
        "bootstrap": "^4.6.2",
        "firebase": "^9.22.2",
        "jquery": "^3.7.0",
        "libphonenumber-js": "^1.10.36",
        "lodash-es": "^4.17.21",
        "md5": "^2.3.0",
        "memo-decorator": "^2.0.1",
        "moment": "^2.29.4",
        "moment-timezone": "^0.5.43",
        "ngx-owl-carousel-o": "^16.0.0",
        "popper.js": "^1.16.1",
        "rxjs": "~7.8.0",
        "tslib": "^2.3.0",
        "web-animations-js": "^2.3.2",
        "zone.js": "~0.13.1"
    },
    "devDependencies": {
        "@angular-builders/custom-webpack": "^16.0.0",
        "@angular-devkit/build-angular": "^16.1.3",
        "@angular-eslint/builder": "16.0.3",
        "@angular-eslint/eslint-plugin": "16.0.3",
        "@angular-eslint/eslint-plugin-template": "16.0.3",
        "@angular-eslint/schematics": "16.0.3",
        "@angular-eslint/template-parser": "16.0.3",
        "@angular/cli": "^16.1.3",
        "@angular/compiler-cli": "^16.1.3",
        "@types/jasmine": "~4.3.0",
        "@types/jquery": "^3.5.16",
        "@types/lodash-es": "^4.17.7",
        "@types/md5": "^2.3.2",
        "@types/node": "^18.16.18",
        "@typescript-eslint/eslint-plugin": "^5.59.2",
        "@typescript-eslint/parser": "^5.59.11",
        "eslint": "^8.43.0",
        "eslint-config-prettier": "^8.8.0",
        "eslint-plugin-prettier": "^4.2.1",
        "jasmine-core": "~4.5.0",
        "karma": "~6.4.0",
        "karma-chrome-launcher": "~3.1.0",
        "karma-coverage": "~2.2.0",
        "karma-jasmine": "~5.1.0",
        "karma-jasmine-html-reporter": "~2.0.0",
        "moment-locales-webpack-plugin": "^1.2.0",
        "prettier": "^2.8.8",
        "prettier-eslint": "^15.0.1",
        "prettier-plugin-organize-attributes": "^0.0.5",
        "select-prompt": "^0.3.2",
        "source-map-explorer": "^2.5.3",
        "ts-node": "~8.3.0",
        "typescript": "~5.1.3"
    }
}

angular.json 配置 #

{
    "$schema": "node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
        "scbweb-web": {
            "projectType": "application",
            "schematics": {
                "@schematics/angular:component": {
                    "style": "scss",
                    "standalone": true
                },
                "@schematics/angular:directive": {
                    "standalone": true
                },
                "@schematics/angular:pipe": {
                    "standalone": true
                },
                "@schematics/angular:application": {
                    "strict": true
                }
            },
            "root": "",
            "sourceRoot": "src",
            "prefix": "app",
            "architect": {
                "build": {
                    "builder": "@angular-builders/custom-webpack:browser",
                    "options": {
                        "outputPath": "dist",
                        "index": "src/index.html",
                        "main": "src/main.ts",
                        "polyfills": "src/polyfills.ts",
                        "tsConfig": "tsconfig.app.json",
                        "aot": true,
                        "assets": ["src/favicon.ico", "src/assets", "src/manifest.webmanifest"],
                        "styles": ["node_modules/animate.css/animate.min.css", "src/styles.scss"],
                        "scripts": [],
                        "customWebpackConfig": {
                            "path": "./custom-webpack.config.js",
                            "replaceDuplicatePlugins": true,
                            "mergeStrategies": {
                                "externals": "prepend"
                            }
                        }
                    },
                    "configurations": {
                        "production": {
                            "fileReplacements": [
                                {
                                    "replace": "src/environments/environment.ts",
                                    "with": "src/environments/environment.prod.ts"
                                }
                            ],
                            "outputHashing": "all",
                            "budgets": [
                                {
                                    "type": "initial",
                                    "maximumWarning": "500kb",
                                    "maximumError": "3mb"
                                },
                                {
                                    "type": "anyComponentStyle",
                                    "maximumWarning": "2kb",
                                    "maximumError": "4kb"
                                }
                            ],
                            "optimization": true,
                            "sourceMap": true,
                            "namedChunks": true,
                            "extractLicenses": true,
                            "vendorChunk": false,
                            "buildOptimizer": true
                        },
                        "development": {
                            "buildOptimizer": false,
                            "optimization": false,
                            "vendorChunk": true,
                            "extractLicenses": false,
                            "sourceMap": true,
                            "namedChunks": true
                        }
                    },
                    "defaultConfiguration": "production"
                },
                "serve": {
                    "builder": "@angular-devkit/build-angular:dev-server",
                    "options": {
                        "browserTarget": "scbweb-web:build"
                    },
                    "configurations": {
                        "production": {
                            "browserTarget": "scbweb-web:build:production"
                        },
                        "development": {
                            "browserTarget": "scbweb-web:build:development"
                        }
                    }
                },
                "extract-i18n": {
                    "builder": "@angular-devkit/build-angular:extract-i18n",
                    "options": {
                        "browserTarget": "scbweb-web:build"
                    }
                },
                "test": {
                    "builder": "@angular-devkit/build-angular:karma",
                    "options": {
                        "main": "src/test.ts",
                        "polyfills": "src/polyfills.ts",
                        "tsConfig": "tsconfig.spec.json",
                        "karmaConfig": "karma.conf.js",
                        "assets": ["src/favicon.ico", "src/assets", "src/manifest.webmanifest"],
                        "styles": ["node_modules/animate.css/animate.min.css", "src/styles.scss"],
                        "scripts": []
                    }
                },
                "lint": {
                    "builder": "@angular-eslint/builder:lint",
                    "options": {
                        "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
                    }
                },
                "e2e": {
                    "builder": "@angular-devkit/build-angular:protractor",
                    "options": {
                        "protractorConfig": "e2e/protractor.conf.js",
                        "devServerTarget": "scbweb-web:serve"
                    },
                    "configurations": {
                        "production": {
                            "devServerTarget": "scbweb-web:serve:production"
                        }
                    }
                }
            }
        }
    },
    "cli": {
        "schematicCollections": ["@angular-eslint/schematics"]
    }
}

内容的提问来源于stack exchange，提问作者Paolo De Laurentiis