Angular sub-child router lazy loading

Question

Edit: still haven't solved, I'm using angular 9 rc7 btw

Many hours passed and I still don't understand whats wrong, thats my repo where you can check directly - https://github.com/Mautriz/angular-boilerplate/tree/feature/cypress

I have a root router, a lazy-loaded "pages" module, and the pages module has many lazy loaded children

// App
const routes: Routes = [
  {
    path: "page-not-found",
    component: NotFoundComponent
  },
  {
    path: "",
    loadChildren: () => import("./pages/pages.module").then(m => m.PagesModule),
    data: { preload: true }
  },

  {
    path: "**",
    redirectTo: "page-not-found"
  }
];
// Pages
const routes: Routes = [
  {
    path: "",
    component: LayoutComponent,
    children: [
      {
        path: "statistics",
        loadChildren: () =>
          import("./statistics/statistics.module").then(
            m => m.StatisticsModule
          ),
        data: { preload: true }
      },
      {
        path: "",
        loadChildren: () =>
          import("./homepage/homepage.module").then(m => m.HomepageModule),
        data: { preload: true }
      }
    ]
  }
];

The problem is that if I check chromes request, I can only see the "pages-module" lazily loaded, but can't see the single pages ones (even tho they work)

Why are they not lazily loaded ? Am I missing something? I'm trying to implement a custom strategy and that's preventing me from understanding if it's working or not

EDIT: https://i.sstatic.net/G56zx.png The submodules are not getting generated appearently, and I don't know why

Answer 1

I solved the problem, it was just a simple importing mistake in the end.
I had imported the homepage module in the pages module (even tho the lazy loading in routing was correct)

@NgModule({
  imports: [
    CommonModule,
    PagesRoutingModule,
    HomePageModule, // MISTAKE!!!
    SharedModule,
    TranslateModule.forChild({ loader: TranslationLoader })
  ],
  declarations: [LayoutComponent]
})
export class PagesModule {}

Answer 2

You seem to not have configured the HomePageRoutingModule and StatisticsRoutingModule. Hence the issue.

Please configure those modules as well to see chunks of them getting generated.

Here is how you would do that for HomepageRoutingModule:

import { HomepageComponent } from "./homepage.component";
import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";

const routes: Routes = [{ path: "", component: HomepageComponent }];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class HomepageRoutingModule {}

Similarly for StatisticsRoutingModule, you'd do it like this:

import { StatisticsComponent } from "./statistics.component";
import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";

const routes: Routes = [
  {
    path: "",
    component: StatisticsComponent
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class StatisticsRoutingModule {}

Seems to be getting generated for me:

Here's the GitHub Repo for the Code that I have for your ref.

Here's the Sample Working Code Demo for your ref.