Angular: Await method do not execute the route.navigate() present inside the setTimeout?

I faced a weird issue when I am integrating a async routing above the await method. If I remove the await method, I can see the routing id working as expected. Below I am giving the code sample.

async deleteApplication() {
const confirm = await this._prompt.showDelteConfirm(this.application.name);
if (confirm) {
// Block 1 start
setTimeout(async () => {
try {
await this._router.navigate(['/tenant']);
console.log('redirected.');
} catch (error) {
console.error('Error navigating within tenant:', error);
}
}, 5000);
// Block 1 end

// BLock 2 start
const {result} = await this._applicationService.delete();
if (result === 'Success') {
await this._projectSpaces.request();
await this._router.navigate(['/tenant']);
}
// BLock 2 end
}
}


I suppose to redirect to a new route after few seconds (i.e after 5sec) as soon as after the delete() service started. If block 1 and Block 2 execute at a time, When await methods start executing then the routing method present inside the block 1 is not executing. Don't understand this kind of weird issue.

I need your thought on this.

Continue reading...