no longer preloads

src/app/app.routes.ts

@@ -1,11 +1,14 @@
 import { Routes } from '@angular/router';
-import { AboutComponent } from '../pages/about/about.component';
-import { Contact } from '../pages/contact/contact';
-import { Home } from '../pages/home/home';
 
 export const routes: Routes = [
   { path: '', redirectTo: 'home', pathMatch: 'full' },
-  { path: 'home', component: Home },
-  { path: 'about', component: AboutComponent },
-  { path: 'contact', component: Contact },
+  { path: 'home', loadComponent: () => import('../pages/home/home').then((x) => x.Home) },
+  {
+    path: 'about',
+    loadComponent: () => import('../pages/about/about').then((x) => x.About),
+  },
+  {
+    path: 'contact',
+    loadComponent: () => import('../pages/contact/contact').then((x) => x.Contact),
+  },
 ];

src/pages/about/about.component.ts

@@ -1,36 +0,0 @@
-import { Component } from '@angular/core';
-import { CardComponent } from '../../components/card/card';
-
-export interface Pillar {
-  title: string;
-  description: string;
-}
-
-@Component({
-  selector: 'app-about',
-  imports: [CardComponent],
-  templateUrl: './about.html',
-  styleUrl: './about.css',
-})
-export class AboutComponent {
-  readonly pillars: Pillar[] = [
-    {
-      title: 'Angular UI',
-      description: 'Component-driven interfaces with a strong focus on clarity, speed, and accessibility.',
-    },
-    {
-      title: 'C# Backend',
-      description: 'Reliable APIs and services shaped with clean architecture and maintainable domain logic.',
-    },
-    {
-      title: 'Flutter Mobile',
-      description: 'Polished mobile apps with shared design systems and a smooth native feel.',
-    },
-  ];
-
-  readonly values: string[] = [
-    'Ship practical features with a thoughtful product mindset.',
-    'Keep the codebase simple, testable, and easy to evolve.',
-    'Balance visual polish with performance and real-world usability.',
-  ];
-}

src/pages/about/about.spec.ts

@@ -1,17 +1,17 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { AboutComponent } from './about.component';
+import { About } from './about';
 
 describe('About', () => {
-  let component: AboutComponent;
-  let fixture: ComponentFixture<AboutComponent>;
+  let component: About;
+  let fixture: ComponentFixture<About>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [AboutComponent],
+      imports: [About],
     }).compileComponents();
 
-    fixture = TestBed.createComponent(AboutComponent);
+    fixture = TestBed.createComponent(About);
     component = fixture.componentInstance;
     await fixture.whenStable();
     fixture.detectChanges();