How to lazy load with chunks

Hello,

I’ve been using ui-router since AngularJS, but I’ve never really felt the need to lazy-load modules until now, as performance is a major point for a project I’m working on. I’ve come into contact with the lazy-load mechanism of the default Angular Router before, but generally don’t like the default router, so I’d prefer to stay with ui-router.

My problem is that with the ui-router lazy loading, Angular doesn’t seem to generate separate chunks for lazy loaded modules, resulting in no size difference of the initial chunk. I’ve been following the guide for Angular (https://ui-router.github.io/guide/lazyloading#angular) and adjusted my code accordingly (see example module below).

media-player.module.ts

...
@NgModule({ 
  declarations: [...],
  imports: [
    SharedModule,
    UIRouterModule.forChild({
      states: [{
        name: 'mediaPlayer',
        url: '/player/:id',
        component: MediaPlayerComponent,
      }],
    }),
  ];
})
export class MediaPlayerModule { }

app.module.ts

...
@NgModule({
  declarations: [...],
  imports: [
    UIRouterModule.forRoot({
      states: [
        ...,
        {
          name: 'mediaPlayer.**',
          loadChildren: async () => import('./modules/media-player/media-player.module').then((m) => m.MediaPlayerModule),
        },
        ...,
      ],
      initial: ...,
      otherwise: ...,
      config: ...,
    }),
  ],
  providers: [...],
  bootstrap: [AppComponent],
})
export class AppModule {}

[Lubjan]

Okay will do that, thank you very much for your help. Hope you have a pleasant Tuesday 😃

[mokipedia]

As the module holds the state definitions, I think that is normal. You can however (and I would encourage you to) split the lazyloaded routes each into a future state to minimize the chunk size and give the future state a full url description. that way the url is always known, even when the state itselt if not.