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.imgur.com/AbW6v7j.png The submodules are not getting generated appearently, and I don't know why

Answer 1

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 theGitHub Repo for the Code that I have for your ref.

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

Answer 2

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 {}