Can I trigger pre-loading of modules when using ui-router lazy loading

Question

I'm using Angular8 with UI-Router.

Some of my modules are lazy-loaded using UI-Router Future States

export const futureState = {
    name: "app.users.**",
    url: "/users",
    loadChildren: () => import("../user.module").then((m) => m.UserModule)
};

Browsing to /users causes the UserModule to be fetched over the network and loaded. (as part of a file produced by WebPack)

Is it possible for the initial page to trigger the lazy-load the UserModule, so that when /users is visited the UserModule has already been loaded?

there is preloading strategy option for such cases in native AngularRouterModule, but you have to switch from UI router — Andrei
– Andrei, Commented Jan 9, 2020 at 14:33

ockendenjo · Accepted Answer · 2020-01-10 09:42:20Z

1

The following seems to work:

export class HomePageComponent implements OnInit {

    ngOnInit() {
        //Preload the user pages here as it's likely the user will
        //visit them next
        import("./user/user.module").then(m => m.UserModule);
    }
}

I've left the future state definition as above. This causes the UserModule to be loaded:

If the user visits the home page
If the user goes directly to the user page

answered Jan 10, 2020 at 9:42

ockendenjo

111 silver badge3 bronze badges

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

Collectives™ on Stack Overflow

Can I trigger pre-loading of modules when using ui-router lazy loading

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related