How to lazy load with chunks about angular

[Lubjan]

Okay, changed it to that now the link works on click (had mediaPlayerModule set as parent before), thanks for the help on that. :D
But I noticed a small thing that could still be a problem, when the module is not yet loaded any link that would navigate to /watch/stream/<id> just links to /watch (problematic when opened in another tab) is that still something that occurs because I have incorrectly set things up or is that normal and I should just generate a static link from it as placeholder?

[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.

[Lubjan]

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

[mokipedia]

Hi @Lubjan,
there is a lot missing here - like: do you use angular cli or custom build config?

as long as you do not import that MediaPlayer module into another Module imported in the root module, the cli build generates a chunkfile that is then lazyloaded automatically by the code you shared - same as with angular router, as the dynamic import is the indicator for the bundler

This is not a problem with ui-router btw but most likely with your code or setup. My first guess would be you still import the media player module somewhere so the bundler sees no benefit in chunking it out.

[Lubjan]

Hey,
sorry for the forgotten information there, I use the default CLI no custom configuration.

As you pointed out, I did indeed forget to remove the MediaPlayerModule (and others) from the app.module.ts, resulting in no generated chunks. Removing them now generates them.

But now it won't let me navigate to any routes of lazy modules, gotta figure out why.

[mokipedia]

@Lubjan: you forgot the url for the lazyloading future state.
you need the url in the future state, otherwise ui-router does not activate the state afaik.
url: '/player' in your case should work

[Lubjan]

Okay I've added the url

{
  name: 'mediaPlayerModule.**',
+ url: '/watch',
  loadChildren: async () => import('./modules/media-player/media-player.module').then((m) => m.MediaPlayerModule),
},

and adjusted the children accordingly

export const states: Ng2StateDeclaration[] = [
  {
    name: 'mediaPlayerModule',
    abstract: true,
  },
  {
    name: 'stream',
-   url: '/stream/:id?t',
+   url: '/watch/stream/:id?t',
    component: MediaPlayerComponent,
    params: {
      t: {
        type: 'int',
        inherit: false,
      },
    },
    resolve: {
      info: [
        ApiService, Transition,
        async (api: ApiService, trans: Transition) => api.mediaInfo({ episode: trans.params().id }).toPromise(),
      ],
      playlist: [
        ApiService, Transition,
        async (api: ApiService, trans: Transition) => api.mediaPlaylist({ episode: trans.params().id }).toPromise(),
      ],
      discoverySimilar: [
        ApiService, Transition,
        async (api: ApiService, trans: Transition) => api.discoverySimilar().toPromise(),
      ],
    },
    data: { enabled: environment.modules.streams },
  },
];

Navigating to localhost:4200/watch/stream/<id> works fine, but when used as a link (e.g. <a uiSref="stream" [uiParams]="{id:519}">stream</a>) it won't navigate, only after a link with uiSref="mediaPlayer.mediaPlayer" is clicked it will resolve them. I feel extremely dumb right now.

Any idea where my problem could lie?

[mokipedia]

I would argue that stream is not a child of mediaPlayerModule.
Eigher call it mediaPlayerModule.stream or set parent: 'mediaPlayerModule'.
Not sure why you use that abstract though. seems unnecessary if you only have 1 route.

In general: mediaPlayerModule.** means als children of mediaPlayerModule (including itself) are to be found in this lazy chunk, so they must be nested accordingly.

In link you would call it like mediaPlayerModule.stream anyways if you are not a sibling of this route (e.G. mediaPlayerModule.info)

[Lubjan]

I also tried mediaPlayerModule.stream before but with the same result, only difference being that there was no component loaded when navigated directly to (resolvers did load though).
There are other sub-routes planned, that's why stream is a separate child of mediaPlayerModule and itself being abstract.

[Lubjan]

have you tried adding a layout view (can be an empty component with <div ui-view></div>) to your abstract? I have to admit I have not tried an abstract state without view.

That fixed the view being empty, but the links can still not be navigated to unless the link to the parent is used once.

Is there by any chance a setting (that I may have overlooked) to tell UI router to load lazy modules as soon as the initial chunk finished loading like in Angulars preloadingStrategy for the default router. But I guess the problem would still stand for users with slow connections.

[mokipedia]

As I said, they need to be nested. There is no stream state in root.
You tell root all there is, but a future state indicates, there is more nested here with this name after lazyloading.
mediaPlayerModule.stream is the identifyer coming from root, however you have to tell him in the state (by naming it like that or by adding the parent, as I stated before). Navigation via URL works, as you tell him to look into all states after loading that module in /watch and there is a state that matches the given url in there. however it is not a child of abstract mediaPlayerModule