Response data from valuable to undefined

I have a function for call api from backend. usually , backend return response and client handler this

public QuickRenew = (requestData: myRequestHUb, receiveCallBack: (data: myREsHub) => void, receiveErrorCallBack: (data: myREsHub) => void, noSessionCallBack: (data: myREsHub) => void,
completeCallBack: (data: myREsHub) => void = null,
receiveUnExceptedErrorCallBack: (data: myREsHub ) => void,
reciveSubMaintenanceModeCallBackdata: myREsHub ) => void): void => {
const url = location.protocol + "//" + location.host + '/api/QuickHub/Quickrenew';

let responseData: myREsHub = null;
this.http.post<any>(url, requestData, { responseType: "json", headers: { "X-XSRF-TOKEN" : checkToken } })
.subscribe(
(res: any) => {
responseData = res;

if (!!responseData.MaintenanceMode) {
location.href = "/";
return;
}

if (responseData.NoSession) {
noSessionCallBack(responseData);
} else if (responseData.IsUnexpectedError) {
receiveUnExceptedErrorCallBack(responseData);
} else if (responseData.IsError) {

receiveErrorCallBack(responseData);
} else if (responseData.SubMaintenanceMode){
reciveSubMaintenanceModeCallBack(responseData);
}else {

receiveCallBack(responseData);

}
},
e => {
receiveUnExceptedErrorCallBack(responseData);
},
() => {
console.log("success")
if (!!completeCallBack) {
completeCallBack(responseData);
}
}
);
}


AND this is my receiveCallBack function

async (resHubDto: myResponse) => {
console.log("implement start")

const transferData = {
invoiceId: resHubDto.InvoiceId,

};
this.serviceContainer.DataTransferService.setData(transferData, this.serviceContainer.DataTransferService.QuickDomainRenewDoneKey);

this.router.navigate(['/sp/quick/renewal/done']);
}


in this information some version i use

"dependencies": {
"@angular/animations": "^18.2.13",
"@angular/cdk": "^18.2.14",
"@angular/common": "^18.2.13",
"@angular/compiler": "^18.2.13",
"@angular/core": "^18.2.13",
"@angular/forms": "^18.2.13",
"@angular/platform-browser": "^18.2.13",
"@angular/platform-browser-dynamic": "^18.2.13",
"@angular/router": "^18.2.13",
"@ngrx/store": "^18.1.1",
"@ngrx/store-devtools": "^18.1.1",
"@types/credit-card-type": "^9.0.0",
"@types/file-saver": "^2.0.7",
"@types/pikaday": "^1.7.9",
"card-validator": "^8.1.1",
"chart.js": "^4.4.3",
"core-js": "^3.36.1",
"credit-card-type": "^10.0.0",
"dompurify": "^3.2.4",
"esbuild": "^0.25.2",
"file-saver": "^2.0.5",
"gulp-esbuild": "^0.14.0",
"lodash": "^4.17.21",
"marked": "^15.0.7",
"ng2-charts": "^6.0.1",
"path-to-regexp": "^8.2.0",
"pikaday": "^1.8.2",
"rxjs": "^6.6.7",
"trim-newlines": "^5.0.0",
"tslib": "^2.6.2",
"zone.js": "~0.14.4"
},


the backend side definitely returned responseHub with value but when the revicecallback function runs the value of responseHub returns undefined. this doesn't happen often. it only happened when i started upgrading from angular 16 to angular 18.2.13 and changed the build mode to angular-devkit/build-angular:application. my guess is this related to mutal object of typescript and i can fix them. but what actually happened and is it related to angular version or typescript version .. etc ? I try fix with that

public QuickRenew = (requestData: myRequestHUb, receiveCallBack: (data: myREsHub) => void, receiveErrorCallBack: (data: myREsHub) => void, noSessionCallBack: (data: myREsHub) => void,
completeCallBack: (data: myREsHub) => void = null,
receiveUnExceptedErrorCallBack: (data: myREsHub ) => void,
reciveSubMaintenanceModeCallBackdata: myREsHub ) => void): void => {
const url = location.protocol + "//" + location.host + '/api/QuickHub/Quickrenew';

let responseData: myREsHub = null;
this.http.post<any>(url, requestData, { responseType: "json", headers: { "X-XSRF-TOKEN" : checkToken } })
.subscribe(
(res: any) => {
responseData = {..res}; // i change it

if (!!responseData.MaintenanceMode) {
location.href = "/";
return;
}

if (responseData.NoSession) {
noSessionCallBack(responseData);
} else if (responseData.IsUnexpectedError) {
receiveUnExceptedErrorCallBack(responseData);
} else if (responseData.IsError) {

receiveErrorCallBack(responseData);
} else if (responseData.SubMaintenanceMode){
reciveSubMaintenanceModeCallBack(responseData);
}else {

receiveCallBack(responseData);

}
},
e => {
receiveUnExceptedErrorCallBack(responseData);
},
() => {
console.log("success")
if (!!completeCallBack) {
completeCallBack(responseData);
}
}



and the error no longer occurs.Can you give me more information why this error occurs?

Continue reading...