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

While serving the app, do you see the chunks getting generated for the single pages ones? — SiddAjmera
– SiddAjmera, Commented Dec 22, 2019 at 10:16
Just checked, no they aren't getting generated :/ i.imgur.com/AbW6v7j.png — Mauro Insacco
– Mauro Insacco, Commented Dec 22, 2019 at 10:18

Community · Accepted Answer · 2020-06-20 09:12:55Z

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

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

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Dec 22, 2019 at 10:49

SiddAjmera

39.6k7 gold badges77 silver badges113 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

SiddAjmera Over a year ago

PS: You won't see the modules getting downloaded on lazily and on-demand on StackBlitz coz they have some really complex algorithm that preloads even the lazily-loaded modules. In order to see it lazily-load modules on-demand, you'll have to check by cloning the repo that I've attached with the answer. Just letting you know about it upfront :)

Mauro Insacco Over a year ago

hey man, thanks for the answer, I already had those modules configured with router and forChild tho, that's the repository github.com/Mautriz/angular-boilerplate/tree/feature/cypress. Don't mind all the random stuff, I'm using this project to learn

SiddAjmera Over a year ago

I think these additional changes that you've made is what's breaking the code chunking. I also see that you've used some CustomPreloadStrategy as your preloadStrategy in the AppRoutingModule. That could be causing the issue. BTW, I was not able to run your App on my local as I kept getting core.js:6406 ERROR Error: Uncaught (in promise): Error: Runtime compiler is not loaded error

Mauro Insacco Over a year ago

It worked to me using both npm and yarn on a different computer (having just downloaded it), have you used the ng serve as "npm run ng serve"? might be because you are using a different angular version (i'm using 9.0.0-rc7

Mauro Insacco · Accepted Answer · 2019-12-25 21:31:35Z

0

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

answered Dec 25, 2019 at 21:31

Mauro Insacco

1,3544 gold badges16 silver badges29 bronze badges

Collectives™ on Stack Overflow

Angular sub-child router lazy loading

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related