lazy loading

src/app/app.component.ts

@@ -6,72 +6,12 @@ import { Router, RouterOutlet } from '@angular/router';
   selector: 'app-root',
   standalone: true,
   imports: [RouterOutlet],
-  template: ` <router-outlet /> `,
+  template: `<router-outlet />`,
 })
 export class AppComponent implements OnInit {
   router: Router = inject(Router);
 
   ngOnInit() {
     this.router.navigate(['hotels']);
-
-    const users = [
-      {
-        name: 'John',
-        age: 15,
-      },
-      {
-        name: 'Alice',
-        age: 16,
-      },
-      {
-        name: 'Bob',
-        age: 45,
-      },
-      {
-        name: 'Eve',
-        age: 29,
-      },
-      {
-        name: 'Charlie',
-        age: 52,
-      },
-      {
-        name: 'Dave',
-        age: 41,
-      },
-      {
-        name: 'Mallory',
-        age: 37,
-      },
-      {
-        name: 'Trent',
-        age: 48,
-      },
-      {
-        name: 'Peggy',
-        age: 26,
-      },
-      {
-        name: 'Victor',
-        age: 39,
-      },
-    ];
-
-    from(users)
-      .pipe(
-        filter((user) => user.age >= 18),
-        reduce(
-          (acc, user) => {
-            acc.age += user.age;
-            acc.count++;
-            return acc;
-          },
-          { age: 0, count: 0 },
-        ),
-        map((data) => data.age / data.count),
-      )
-      .subscribe((data) => {
-        console.log('avg age: ', data);
-      });
   }
 }

src/app/app.routes.ts

@@ -6,17 +6,17 @@ import { CreateHotelComponent } from './hotel/component/create-hotel.component';
 export const routes: Routes = [
   {
     path: 'hotels',
-    component: HotelsComponent,
+    loadComponent: () => import('./hotel/component/hotels.component').then((m) => m.HotelsComponent),
     title: 'Hotels',
   },
   {
     path: 'hotels/new',
-    component: CreateHotelComponent,
+    loadComponent: () => import('./hotel/component/create-hotel.component').then((m) => m.CreateHotelComponent),
     title: 'New Hotel',
   },
   {
     path: 'hotels/:hotelId',
-    component: HotelComponent,
+    loadComponent: () => import('./hotel/component/hotel.component').then((m) => m.HotelComponent),
     title: 'Hotel',
   },
 ];

src/app/hotel/component/hotels.component.ts

@@ -1,14 +1,14 @@
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
-import { HotelComponent } from './hotel.component';
-import { Hotel } from '../model/hotel';
-import { FormsModule } from '@angular/forms';
-import { Lang } from '../../currency/lang';
-import { HotelService } from '../service/hotel.service';
-import { Observable } from 'rxjs';
-import { AsyncPipe, NgIf } from '@angular/common';
-import { CurrencyComponent } from '../../currency/currency.component';
-import { RouterLink } from '@angular/router';
-import { StarComponent } from './star.component';
+import {ChangeDetectionStrategy, Component, inject} from '@angular/core';
+import {HotelComponent} from './hotel.component';
+import {Hotel} from '../model/hotel';
+import {FormsModule} from '@angular/forms';
+import {Lang} from '../../currency/lang';
+import {HotelService} from '../service/hotel.service';
+import {Observable} from 'rxjs';
+import {AsyncPipe, NgIf} from '@angular/common';
+import {CurrencyComponent} from '../../currency/currency.component';
+import {RouterLink} from '@angular/router';
+import {StarComponent} from './star.component';
 
 @Component({
   standalone: true,