My blogging application reloads when i switch tab to a new tab. The moment the tab with the application is out of focus, the application reloads and return to the base route.
For example if I am filling out a form on the ‘/myform’ route and i switch tabs to get information for another tab, when i return, the app reloads to ‘/’ route
I have attempeted cache the last active route. This is implemented in app.component.ts
ngOnInit() {
this.router.events.subscribe(event => {
if (event instanceof NavigationEnd) {
localStorage.setItem('lastRoute', event.urlAfterRedirects);
}
});
// Check if there's a stored route when the app initializes
const lastRoute = localStorage.getItem('lastRoute');
if (lastRoute ) {
// Navigate to the stored route if it's different from the current route
this.router.navigateByUrl(lastRoute);
}
Listen for visibility change events (when the user leaves or returns to the tab)
document.addEventListener('visibilitychange', () => {
if (!document.hidden) {
console.log('VISIBILITY')
// When the tab becomes visible again, restore the route
const lastRoute = localStorage.getItem('lastRoute');
if (lastRoute && this.router.url !== lastRoute) {
this.router.navigateByUrl(lastRoute);
}
}
});
}
This the route is cached but the reload still happens.
I have also attempted the to use implement the routeReuseStrategy
@Injectable()
export class CustomReuseStrategy implements RouteReuseStrategy {
shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
throw new Error('Method not implemented.');
}
store(snapshot: ActivatedRouteSnapshot): DetachedRouteHandle | null {
// Add logic to determine which routes to store (e.g., by route data)
if (snapshot.data['store']) {
return { handle: snapshot.component, selector: snapshot.routeConfig?.path };
}
return null;
}
shouldAttach(route: ActivatedRouteSnapshot): boolean {
return !!route.routeConfig && !!route.data['reuse'];
}
shouldDetach(route: ActivatedRouteSnapshot): boolean {
return !!this.store(route); // Detach only if the route is stored
}
retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle | null {
// Retrieve the previously stored handle based on route information
const routeConfig = route.routeConfig?.path
if(routeConfig){
const stored = localStorage.getItem(routeConfig);
if (stored) {
return JSON.parse(stored);
}
}
return null;
}
}
And added it to the list of providers in app.config.ts
export const appConfig: ApplicationConfig = {
providers: [
provideHttpClient(),
provideZoneChangeDetection({ eventCoalescing: true }),
provideClientHydration(withHttpTransferCacheOptions({
includePostRequests: true
})),
provideRouter(routes),
provideStore(reducers, { metaReducers }),
provideEffects(authEffects,userProfileEffects,blogEffects,linkedinAuthEffects),
provideStoreDevtools({
maxAge: 25,
logOnly: !isDevMode(),
autoPause:true,
trace:false,
traceLimit:75 }),
provideAnimationsAsync(),
{ provide: RouteReuseStrategy, useClass: CustomReuseStrategy }
]
};
But there is still not change
You need to sign in to view this answers