Lazy load bookings module

Author: xkons

projects/train-platform/src/app/app-routing.module.ts

@@ -1,7 +1,6 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { BookingModule } from '../booking/booking.module';
-import { BookingComponent } from '../booking/booking/booking.component';
 import { JourneySelectionComponent } from '../journey/journey-selection/journey-selection.component';
 import { JourneyModule } from '../journey/journey.module';
 
@@ -13,9 +12,9 @@ const routes: Routes = [
     data: { title: 'Journeys' },
   },
   {
-    path: 'bookings/journey/:journeyId',
-    component: BookingComponent,
-    data: { title: 'Book journey' },
+    path: 'bookings',
+    loadChildren: () =>
+      import('./../booking/booking.module').then((m) => m.BookingModule),
   },
 ];
 

projects/train-platform/src/booking/booking/booking.component.css renamed to projects/train-platform/src/booking/booking-form/booking-form.component.css

@@ -7,11 +7,11 @@ import { filter, map } from 'rxjs/operators';
 import { BookingService } from '../booking.service';
 
 @Component({
-  selector: 'app-booking',
-  templateUrl: './booking.component.html',
-  styleUrls: ['./booking.component.css'],
+  selector: 'app-booking-form',
+  templateUrl: './booking-form.component.html',
+  styleUrls: ['./booking-form.component.css'],
 })
-export class BookingComponent implements OnInit {
+export class BookingFormComponent implements OnInit {
   reserveSeat = false;
   firstClass = false;
   journeyId$!: Observable<string>;

projects/train-platform/src/booking/booking/booking.component.html renamed to projects/train-platform/src/booking/booking-form/booking-form.component.html

@@ -1,20 +1,25 @@
-import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { BookingComponent } from './booking/booking.component';
 import { RouterModule } from '@angular/router';
 import { HotToastModule } from '@ngneat/hot-toast';
 import { TranslateModule } from '@ngx-translate/core';
+import { BookingFormComponent } from './booking-form/booking-form.component';
 
 @NgModule({
-  declarations: [BookingComponent],
+  declarations: [BookingFormComponent],
   imports: [
     CommonModule,
     FormsModule,
-    RouterModule.forChild([]),
+    RouterModule.forChild([
+      {
+        path: 'journey/:journeyId',
+        component: BookingFormComponent,
+        data: { title: 'Book journey' },
+      },
+    ]),
     HotToastModule.forRoot(),
     TranslateModule.forChild(),
   ],
-  exports: [BookingComponent],
 })
 export class BookingModule {}