Angular App does not bootstrap when refreshing multiple time or opening in new tab

I have an angular application (version 13). It loads fine when starting the app or opening first time. When I am refreshing the page or open it in new tab it does not load. I debugged the code. It goes in Main.ts and from there it does not call bootstrap.ts. It gets stuck. It does not throw any error too. I tried retry mechanism to refresh the page if it does not get bootstrapped in 5 seconds. but this too works only sometimes.

const maxRetries = 3;
let attempt = 0;
const bootstrapTimeout = 5000; // 5 Seconds

function loadBootstrapModule() {
import('./bootstrap')
.then(() => {
console.log('Bootstrap module loaded');
clearTimeout(bootstrapTimer); // Clear the timeout if bootstrap is successful
})
.catch((err) => {
console.error('Error loading bootstrap module:', err);
attempt++;
if (attempt < maxRetries) {
console.warn(`Retrying to load bootstrap module... (${attempt}/${maxRetries})`);
loadBootstrapModule();
} else {
alert('Failed to load bootstrap module after multiple attempts. Reloading page...');
window.location.reload();
}
});
}

//Initial call to load the bootstrap module
loadBootstrapModule();

//Set a timeout to reload the page if the application does not bootstrap within the specified period
const bootstrapTimer = setTimeout(() => {
console.log('Application did not bootstrap within the expected time. Reloading page...');
window.location.reload();
}, bootstrapTimeout);


I have tried setting no cache in nginx too. I need help in solving this. Any help would be much appreciated.

Thank You

Continue reading...