延迟加载角度路径404
问题描述 投票：0回答：1
我正在尝试在 Angular 中实现子路由的延迟加载，但遇到了问题。这是相关代码：
在
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 { }
在报告模块中：
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 { }
我已正确导入必要的模块和组件。
我面临的问题是，当我尝试访问路径时，总是收到 404 错误。这是我的项目结构和错误的屏幕截图：
我已经测试了没有父子路径的路由，它工作没有任何问题。然而，当我尝试实现延迟加载时，Angular 并没有按预期工作。
我还验证了延迟加载模块是否已正确导入到 app-routing.module.ts 中，并且延迟加载模块的路径是否正确。
如果有人可以帮助我找出问题或提供有关可能导致 404 错误的原因的指导，我将不胜感激。谢谢！
ReportRoom html 代码：（已添加）
<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>
1个回答
0
投票
投票
我看到的一个问题是内容存在于 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></router-outlet> <!-- changed here -->
最新问题
- 我需要为 .net mvc 项目中使用的 ckeditor 使用下划线工具选项
- Ortools 无法评估 LinearExpr 边缘情况
- React DOM 渲染组件时崩溃
- “.net Core 托管”Blazor WASM 解决方案 Web API 项目上的 Swagger UI
- 在 VS2005、VS2008 下 C++ 的 EXE 速度； VS2010编译器
- 如何在将鼠标悬停在 vega lite 中的图例符号上时将完整的图例标签显示为工具提示
- wdk ddk 编译器与 std::string 和 std::wstring 的问题
- 优先级队列不理解如何跟踪算法
- Azure Blob 自定义角色
- varnish 无法占用 ec2 机器上的 80 端口
- SwiftUI - onTapGesture 中绑定变量的比较（切换网格中行的选择）
- 有没有可以编译C++或C的库
- 我的 CS50 第 2 周的拼字游戏解决方案与符号作斗争。想不通为什么
- 我可以计算某个值的百分比并总结每个采样日期的此信息吗？
- 如何设置 Minecraft Villager 实体到某个位置的路径？即使用 Spigot API 让生物步行到特定地点
- 如何使用 Excel VBA 以编程方式导入 Excel VBA 模块？
- 使用重复的步骤定义运行不同的 Cucumber 套件
- GetElementsByID() 与 QuerySelector()
- 使用python过滤pdf
- Tilera 交叉编译 - 关于此错误的任何想法：未知的 asm 约束字母
© www.soinside.com 2019 - 2024. All rights reserved.