Switch to lazy loading for route components

This change updates the app's route definitions to use lazy loading for all specified components. Lazy loading enhances performance by loading components on demand rather than at the initial load of the application. This can lead to faster initial page load times and improved user experience.
MichiBaum · Nov 22, 2024 · 9147c89 · 9147c89
1 parent 79876c3
commit 9147c89
Showing 1 changed file with 30 additions and 10 deletions.
diff --git a/website/src/app/app.routes.ts b/website/src/app/app.routes.ts
@@ -41,61 +41,81 @@ export const routes: Routes = [
   },
   {
     path: Sides.microservices.navigation,
-    component: MicroserviceOverviewComponent,
+    loadComponent: () =>
+      import("./microservice-overview/microservice-overview.component")
+        .then((c) => c.MicroserviceOverviewComponent),
     canActivate: Sides.microservices.routeCanActivate,
     data: {permissions: Sides.microservices.neededPermissions}
   },
   {
     path: Sides.imprint.navigation,
-    component: ImprintComponent,
+    loadComponent: () =>
+      import("./imprint/imprint.component")
+        .then((c) => c.ImprintComponent),
     canActivate: Sides.imprint.routeCanActivate,
     data: {permissions: Sides.imprint.neededPermissions}
   },
   {
     path: Sides.about_me.navigation,
-    component: AboutMeComponent,
+    loadComponent: () =>
+      import("./about-me/about-me.component")
+        .then((c) => c.AboutMeComponent),
     canActivate: Sides.about_me.routeCanActivate,
     data: {permissions: Sides.about_me.neededPermissions}
   },
   {
     path: Sides.chess.navigation,
-    component: ChessComponent,
+    loadComponent: () =>
+      import("./chess/chess.component")
+        .then((c) => c.ChessComponent),
     canActivate: Sides.chess.routeCanActivate,
     data: {permissions: Sides.chess.neededPermissions}
   },
   {
     path: Sides.chess_settings.navigation,
-    component: ChessSettingsComponent,
+    loadComponent: () =>
+      import("./chess-settings/chess-settings.component")
+        .then((c) => c.ChessSettingsComponent),
     canActivate: Sides.chess_settings.routeCanActivate,
     data: {permissions: Sides.chess_settings.neededPermissions}
   },
   {
     path: Sides.donate.navigation,
-    component: DonateComponent,
+    loadComponent: () =>
+      import("./donate/donate.component")
+        .then((c) => c.DonateComponent),
     canActivate: Sides.donate.routeCanActivate,
     data: {permissions: Sides.donate.neededPermissions}
   },
   {
     path: Sides.fitness.navigation,
-    component: FitnessComponent,
+    loadComponent: () =>
+      import("./fitness/fitness.component")
+        .then((c) => c.FitnessComponent),
     canActivate: Sides.fitness.routeCanActivate,
     data: {permissions: Sides.fitness.neededPermissions}
   },
   {
     path: Sides.fitness_settings.navigation,
-    component: FitnessSettingsComponent,
+    loadComponent: () =>
+      import("./fitness-settings/fitness-settings.component")
+        .then((c) => c.FitnessSettingsComponent),
     canActivate: Sides.fitness_settings.routeCanActivate,
     data: {permissions: Sides.fitness_settings.neededPermissions}
   },
   {
     path: Sides.music.navigation,
-    component: MusicComponent,
+    loadComponent: () =>
+      import("./music/music.component")
+        .then((c) => c.MusicComponent),
     canActivate: Sides.music.routeCanActivate,
     data: {permissions: Sides.music.neededPermissions}
   },
   {
     path: Sides.music_settings.navigation,
-    component: MusicSettingsComponent,
+    loadComponent: () =>
+      import("./music-settings/music-settings.component")
+        .then((c) => c.MusicSettingsComponent),
     canActivate: Sides.music_settings.routeCanActivate,
     data: {permissions: Sides.music_settings.neededPermissions}
   }