Merge pull request #75 from ngfelixl/feat/route-reuse-strategy

feat: cache routes

Author: ngfelixl

apps/web/src/app/app-routing.module.ts

@@ -1,5 +1,12 @@
 import { NgModule } from '@angular/core';
-import { Route, RouterModule } from '@angular/router';
+import {
+  ActivatedRouteSnapshot,
+  BaseRouteReuseStrategy,
+  DetachedRouteHandle,
+  Route,
+  RouteReuseStrategy,
+  RouterModule,
+} from '@angular/router';
 import { PlotsComponent } from './components/plots/plots.component';
 import { TutorialComponent } from './components/tutorial/tutorial.component';
 
@@ -14,3 +21,39 @@ const routes: Route[] = [
   exports: [RouterModule],
 })
 export class AppRoutingModule {}
+
+export class AppRoutesReuseStrategy implements RouteReuseStrategy {
+  private cache: { [key: string]: DetachedRouteHandle } = {};
+
+  shouldDetach(route: ActivatedRouteSnapshot): boolean {
+    return true;
+  }
+
+  store(route: ActivatedRouteSnapshot, handler: DetachedRouteHandle): void {
+    if (handler) {
+      this.cache[this.getUrl(route)] = handler;
+    }
+  }
+
+  shouldAttach(route: ActivatedRouteSnapshot): boolean {
+    return !!this.cache[this.getUrl(route)];
+  }
+
+  shouldReuseRoute(
+    future: ActivatedRouteSnapshot,
+    current: ActivatedRouteSnapshot
+  ): boolean {
+    return future.routeConfig === current.routeConfig;
+  }
+
+  retrieve(route: ActivatedRouteSnapshot) {
+    if (!route.routeConfig || route.routeConfig.loadChildren) {
+      return null;
+    }
+    return this.cache[this.getUrl(route)];
+  }
+
+  private getUrl(route: ActivatedRouteSnapshot): string {
+    return route.routeConfig?.path ?? '';
+  }
+}

apps/web/src/app/app.module.ts

@@ -4,7 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { AppRoutingModule } from './app-routing.module';
+import { AppRoutesReuseStrategy, AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './components/app/app.component';
 import { TutorialComponent } from './components/tutorial/tutorial.component';
 import { MatSidenavModule } from '@angular/material/sidenav';
@@ -15,6 +15,7 @@ import { DragDropModule } from '@angular/cdk/drag-drop';
 import { MatCardModule } from '@angular/material/card';
 import { MatIconModule } from '@angular/material/icon';
 import { MatTooltipModule } from '@angular/material/tooltip';
+import { RouteReuseStrategy } from '@angular/router';
 
 @NgModule({
   declarations: [
@@ -37,7 +38,9 @@ import { MatTooltipModule } from '@angular/material/tooltip';
     MatIconModule,
     MatTooltipModule,
   ],
-  providers: [],
+  providers: [
+    { provide: RouteReuseStrategy, useClass: AppRoutesReuseStrategy },
+  ],
   bootstrap: [AppComponent],
 })
 export class AppModule {}