build: lazy load components.

angular.json

@@ -59,6 +59,7 @@
                 }
               ],
               "outputHashing": "all",
+              "namedChunks": true,
               "serviceWorker": "ngsw-config.json"
             },
             "development": {

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(),
 

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)},
 ];