I have a very simple call to an express function hosted in firebase cloud function:
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);
})
)
);
}
The function is correctly called, I see the network request, as well as the response in the network tab of Chrome (and as well as in log of the firebase express function).
However the http observable doesn't return any value (nor error). The observable doesn't emit.
This happens in development mode only. If I publish the app (firebase hosting), the app works as expected.
I tried using 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);
}
with the above code, everything works both in development and in production.
Here is my 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"
}
}
and angulas.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"]
}
}
I tried to:
- upgrade Angular from v15 to v16 and now to 16.1.3
- upgrade all other packages to latest version
- deleted npm_modules folder and reinstalled completely
