I'm trying to implement lazy loading with child routes in Angular, but I'm encountering an issue. Here's the relevant code:
In app-routing.module:
{
path: 'reporting',
loadChildren: () => import('./reservations/reporting/reporting.module').then(m => m.ReportingModule)
}
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
In reporting 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 { }
I've imported the necessary modules and components correctly.
The issue I'm facing is that when I try to access the paths, I always get a 404 error. Here's a screenshot of my project structure and the error: 404 error
I've tested the routing without parent-child paths, and it works without any problems. However, when I try to implement lazy loading, Angular doesn't work as expected.
I've also verified that the lazy-loaded module is correctly imported in app-routing.module.ts and that the path to the lazy-loaded module is correct.
If anyone could help me identify the issue or provide guidance on what might be causing the 404 errors, I would greatly appreciate it. Thank you!
ReportRoom html code : ( added )
<router-outlet>
<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="numeroChambre" 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 }}</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="problemType" 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>
Report list html :
<div class="content-page">
<div class="content">
<div class="container">
<div class="my-4">
<h2 class="mb-4">Liste des Report</h2>
<div class="table-responsive">
<table class="table table table-strip">
<thead class="thead-dark">
<tr>
<th>ID</th>
<th>Probleme</th>
<th>Description</th>
<th>Date report</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let report of reports">
<td>{{ report.id }}</td>
<td>{{ report.problem }}</td>
<td>{{ report.description }}</td>
<td>{{ report.dateReport }}</td>
<td>
<button class="btn btn-outline-success" (click)="navigate(report.id)">✔ Modifier</button>
<button class="btn btn-outline-danger" (click)="deleteReport(report.id)">✘ Supprimer</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<router-outlet></router-outlet> 
One problem I see is that the content is present inside router-outlet tag which might be causing some issues can you please change it to