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

Question

Accessing child module of parent module localhost:4200/child/subchild gives out the error in the console localhost:4200/child/runtime.js is not found - 404

Going to localhost:4200/child would load the child component but in going to /child/subchild would load a blank page, and the 404 error message on the console.

Versions:

• Angular (core, router) - 7.2.3
• Angular CLI - 7.3.0
• Node - 10.12

Main Module

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

Child Module

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

The page page should display without any errors on going to the url: http://localhost:4200/child/subchild

Answer 1

I have found the cause of this issue since I changed the base href of index.html.

Reverted it from base href='./' to base href='/'.

I changed the base href this way since I was also compiling this angular project to Android using Cordova.