Angular 7个子路由懒加载模块不工作

Question

访问父模块 localhost:4200/child/subchild 的子模块在控制台中给出错误 localhost:4200/child/runtime.js 未找到 - 404

转到 localhost:4200/child 将加载子组件，但转到 /child/subchild 将加载一个空白页面，并在控制台上显示 404 错误消息。

版本：

Angular（核心、路由器）- 7.2.3
Angular CLI - 7.3.0
节点 - 10.12

主模块

const routes: Routes = [{
    path: "child",
    loadChildren: "./modules/child/child.module#ChildModule",
}, {
    path: "",
    pathMatch: "full",
    redirectTo: "",
}];
@NgModule({
    declarations: [AppComponent],
    imports: [
        RouterModule.forRoot(routes),
        ...
    ]
})

子模块

const routes: Routes = [{
    path: "",
    component: ChildComponent,
    children: [
        { path: "subchild", component: SubchildComponent }
    ]
}];
@NgModule({
    declarations: [ChildComponent, SubchildComponent],
    imports: [
        RouterModule.forChild(routes),
        ...
    ]
})

转到 url 时页面应显示无任何错误： http://localhost:4200/child/subchild

Answer 1

自从我更改 index.html 的 base href 后，我找到了这个问题的原因。

已将其从 base href='./' 还原为 base href='/'。

我以这种方式更改了基本 href，因为我也在使用 Cordova 将此 angular 项目编译为 Android。

Angular 7个子路由懒加载模块不工作

Angular 7 sub-routing lazy-loaded modules are not working

angular-routing

angular

angular7