From 462eb7844ad8645c11c439bd92f4bbc0620fd277 Mon Sep 17 00:00:00 2001
From: Louis Poirier <contact@louispoirier.io>
Date: Tue, 30 Jul 2024 17:18:59 +0200
Subject: [PATCH] build: lazy load components.

---
 angular.json          | 1 +
 src/app/app.config.ts | 7 +++++--
 src/app/app.routes.ts | 6 ++----
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/angular.json b/angular.json
index 489168d..cdb8171 100644
--- a/angular.json
+++ b/angular.json
@@ -59,6 +59,7 @@
                 }
               ],
               "outputHashing": "all",
+              "namedChunks": true,
               "serviceWorker": "ngsw-config.json"
             },
             "development": {
diff --git a/src/app/app.config.ts b/src/app/app.config.ts
index ba48700..2d8a2bc 100644
--- a/src/app/app.config.ts
+++ b/src/app/app.config.ts
@@ -3,7 +3,7 @@ import {provideHttpClient} from "@angular/common/http";
 import {MAT_FORM_FIELD_DEFAULT_OPTIONS} from "@angular/material/form-field";
 import {HAMMER_GESTURE_CONFIG, HammerGestureConfig, HammerModule} from "@angular/platform-browser";
 import {provideAnimationsAsync} from '@angular/platform-browser/animations/async';
-import {provideRouter} from '@angular/router';
+import {PreloadAllModules, provideRouter, withPreloading} from '@angular/router';
 import {MAT_SNACK_BAR_DEFAULT_OPTIONS} from "@angular/material/snack-bar";
 import {NgxColorsModule} from "ngx-colors";
 
@@ -13,7 +13,10 @@ import {provideServiceWorker} from '@angular/service-worker';
 
 export const appConfig: ApplicationConfig = {
   providers: [
-    provideRouter(routes),
+    provideRouter(
+      routes,
+      withPreloading(PreloadAllModules)
+    ),
     provideAnimationsAsync(),
     provideHttpClient(),
 
diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index 1c897c7..a271269 100644
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -1,9 +1,7 @@
 import {Routes} from '@angular/router';
-import {ReadmeComponent} from "./pages/readme/readme.component";
-import {EditorComponent} from "./pages/editor/editor.component";
 
 export const routes: Routes = [
   {path: '', redirectTo: 'readme', pathMatch: 'full'},
-  {path: 'readme', component: ReadmeComponent},
-  {path: 'editor', component: EditorComponent},
+  {path: 'readme', loadComponent: () => import('./pages/readme/readme.component').then(c => c.ReadmeComponent)},
+  {path: 'editor', loadComponent: () => import('./pages/editor/editor.component').then(c => c.EditorComponent)},
 ];