延迟加载角度路径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 -->
最新问题
- 如何解密使用Python中的Sodium R包加密的密钥？
- Playwright 无法使用 Javascript 获取离线 HTML 文件中的 JSON 数据
- 无法通过 Jackson 正确反序列化布尔值
- flutter 中的 build.gradle 错误，Visual Studio Code
- 如何控制我的 kafka 流应用程序中用于 leftJoin 操作的内部主题的名称？
- Heroku 上使用 nodejs 的 Google 应用程序凭证：如何使用 dotenv 将 JSON 文件存储到 ENV 变量？
- 阻止 Charles 在 iOS 中没有 SSL Pinning 的情况下跟踪我的应用程序的请求
- 为什么循环可以，直接计算不行？
- 如何在Go中将*big.Rat正确转换为decimal256.Num？
- 处理来自 Here Maps Routing Javascript API 的 X-request-id 请求标头
- Django：通过 Django Admin 将用户添加到组
- 为什么 re.sub 不适用于多行模式下的所有匹配？
- Vuetify v-data-table 对字符串格式的日期和潜在的空值进行排序
- 我可以在Excel中同时将多种格式的值：文本、数字、日期、自定义转换为数字吗？
- 如何在laravel数据表中添加行号或序列号
- 如何将具有不同 id 的 URL 路径分组到 Datadog 中的一个结果中？
- Power BI 中一周中某天的移动平均值
- 输入字段动态映射，但无法从所有字段中获取输入值React JS
- 修改msr[lstar]后，为什么无法命中预期的断点？
- 如果我只安装了最新的 Intel HPC 工具套件，如何使用“icc”？
© www.soinside.com 2019 - 2024. All rights reserved.