lazy loading angular 404 path

i have problem with angular lazy loading when i use normal path it's working but i can't access to children paths this is what i did :

my parent code in app routing module :

  {
    path: 'reporting',
    loadChildren: () => import('../app/reservations/reporting/reporting.module').then(m => m.ReportingModule)
  },

and then i generate new module named reporting :

after that i import the declarations i need :

@NgModule({
  declarations: [
    ReportRoomComponent,
    ReportListComponent,
    UpdateReportsComponent,
  ],
  imports: [
    CommonModule,
    ReportingRoutingModule,
    ReactiveFormsModule,
    FormsModule,
    HttpClientModule,
  ]
})
export class ReportingModule { }

and on routing module :

const routes: Routes = [

   {
    path: '',component: ReportRoomComponent,
    children: [
      { path: 'list', component: ReportListComponent },
      { path: 'update/:id', component: UpdateReportsComponent },
    ]
  } 
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class ReportingRoutingModule { }

the problem is that when i access ReportRoomComponent ( http://localhost:4200/reporting ) it's working but when i try to access list or update i got 404 and nothing appairer on page do i have

my code app component html :



<router-outlet></router-outlet>

my html report room :

<div class="content-page">
    <div class="content">
        <div class="site-section">
            <div class="container">
                <div class="row">
                    <div class="col-lg-7">
                        <form [formGroup]="reportForm" (ngSubmit)="onSubmit()">
                            <!-- Chambre Selection -->
                            <div class="form-group">
                                <label for="numeroChambreSelect" class="form-label">Numéro Chambre:</label>
                               <select formControlName="chambre" id="numeroChambreSelect" class="form-control" required>
                                    <option value="" disabled selected>Choisissez une chambre</option>
                                    <option *ngFor="let room of allRooms" [value]="room.idChambre">{{ room.idChambre }}</option>
                                </select> 
    
                                <div *ngIf="reportForm.controls['chambre'].touched ">
                                    <small class="form-text text-danger" *ngIf="reportForm.controls['chambre'].errors?.['required']">
                                        The room number is required.
                                    </small>
                                </div>

                            </div>

                            <!-- Problem Type Selection -->
                            <div class="form-group">
                                <label for="problemTypeSelect" class="form-label">Type de problème:</label>
                                <select formControlName="problem" id="problemTypeSelect" class="form-control" required>
                                    <option value="" disabled selected>Choisissez le type de problème</option>
                                    <option value="BINOME">BINOME</option>
                                    <option value="CHAUFFAGE">CHAUFFAGE</option>
                                    <option value="EAU">EAU</option>
                                    <option value="GAZ">GAZ</option>
                                    <option value="AUTRE">AUTRE</option>
                                </select>
                                <div *ngIf="reportForm.controls['problem'].touched ">
                                    <small class="form-text text-danger" *ngIf="reportForm.controls['problem'].errors?.['required']">
                                        you have to choose the problem type please
                                    </small>
                                </div>
                            </div>

                            <!-- Description Input -->
                            <div class="form-group">
                                <label for="description" class="form-label">Description:</label>
                                <input formControlName="description" type="text" class="form-control" placeholder="Description" name="description">
                                <div *ngIf="reportForm.controls['description'].touched ">
                                    <small class="form-text text-danger" *ngIf="reportForm.controls['description'].errors?.['required']">
                                        Description is required.
                                    </small>
                                    <small class="form-text text-danger" *ngIf="reportForm.controls['description'].errors?.['minlength']">
                                        Description must be at least 10 characters long.
                                    </small>
                                    <small class="form-text text-danger" *ngIf="reportForm.controls['description'].errors?.['maxlength']">
                                        Description cannot be more than 20 characters long.
                                    </small>
                                    <small class="form-text text-danger" *ngIf="reportForm.controls['description'].errors?.['pattern']">
                                        Description can only contain letters, numbers, and spaces.
                                    </small>
                                </div>
                            </div>

                            <!-- Date of Report Input -->
                            <div class="form-group">
                                <label for="dateReport" class="form-label">Date of Report:</label>
                                <input formControlName="dateReport" type="date" class="form-control" placeholder="Date of Report" name="dateReport">
                            </div>

                            <!-- Submit Button -->
                            <div class="form-group">
                                <input type="submit" class="btn btn-primary py-3 px-5" value="Submit Report">
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<router-outlet></router-outlet>

my index html :

<!DOCTYPE html>
<html lang="en">
    <head>

        <meta charset="utf-8" />
        <title>Dashboard | Adminto - Responsive Admin Dashboard Template</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta
            content="A fully featured admin theme which can be used to build CRM, CMS, etc."
            name="description" />
        <meta content="Coderthemes" name="author" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <!-- App favicon -->
        <link rel="shortcut icon" href="assets/images/favicon.ico">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap4.min.css">
        <!-- App css -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />

        <link href="assets/css/app.min.css" rel="stylesheet" type="text/css"
            id="app-style" />

        <!-- icons -->
        <link href="assets/css/icons.min.css" rel="stylesheet" type="text/css" />

            <link rel="preconnect" href="https://fonts.gstatic.com">
        <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
  <body class="loading mat-typography" data-layout-color="light" data-layout-mode="default"
    data-layout-size="fluid" data-topbar-color="light"
    data-leftbar-position="fixed" data-leftbar-color="light"
    data-leftbar-size='default' data-sidebar-user='true'>

    <app-root></app-root>

  </body>
  <script src="/app/assets/libs/jquery/jquery.min.js"></script>
  <script src="/app/assets/libs/bootstrap/js/bootstrap.bundle.min.js"></script>
  <script src="/app/assets/libs/simplebar/simplebar.min.js"></script>
  <script src="/app/assets/libs/node-waves/waves.min.js"></script>
  <script src="/app/assets/libs/waypoints/lib/jquery.waypoints.min.js"></script>
  <script src="/app/assets/libs/jquery.counterup/jquery.counterup.min.js"></script>
  <script src="/app/assets/libs/feather-icons/feather.min.js"></script>
  <!-- Ajoutez ces lignes dans le bloc head de votre fichier index.html -->


  <!-- knob plugin -->
  <script src="/app/assets/libs/jquery-knob/jquery.knob.min.js"></script>

  <!--Morris Chart-->
  <script src="/app/assets/libs/morris.js06/morris.min.js"></script>
  <script src="/app/assets/libs/raphael/raphael.min.js"></script>

  <!-- Dashboar init js-->
  <script src="/app/assets/js/pages/dashboard.init.js"></script>

  <!-- App js-->
  <script src="/app/assets/js/app.min.js"></script>
</html>

i try to use it without lazy loading it's working and also i add or html but also not working

Solution

I think @stefani-toto s comment it it point in the right direction:

your ReportRoomComponent has no router-outlet, where the children should appear.

if i assume, that you lazy Module is supposed to have 3 "Pages" then you need to give them all a separet route:

const routes: Routes = [
   { path: '',component: ReportRoomComponent}, // this will then be /reporting
   { path: 'list', component: ReportListComponent }, // this will then be /reporting/list
   { path: 'update/:id', component: UpdateReportsComponent },// this will then be /reporting/update/:id
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class ReportingRoutingModule { }

But it might make sense to actually create 3 lazy modules then and do the routing just in your RootModule.