How can I conditionally lazy-load a module (without route change)?

[dietergeerts]

I'm submitting a feature request

behavior

I need a way to conditionally lazy-load a module, without a route change.

For example, on a page, the user does an action, then I want to lazy-load a module, which then will insert extra stuff in the main application. This module will be it's own file.

Another example is when the user has been logged in, based on his role, we want to add some extra stuff into our main application services etc....

(I could not find a way to do that now)

What is the motivation / use case for changing the behavior?

If this feature is possible, we won't get ugly conditional code for executing some functions, and we will not need to load the scripts that we don't need. It would be very convenient to do it.

• Angular version: 2.3.X

[mlc-mlapis]

You can load a module by using your own code also. It depends on which loader you are using. For SystemJS you can look at SystemJsNgModuleLoader class.

[shlomiassaf]

@dietergeerts if it's webpack just use require.ensure or import()

Once you have the module use get the NgModuleFactory to create() the module (you need to supply an injector as well)

You can look at how the router does that

[Toxicable]

This isn't a feature request since this functionality already exists on Angular's side. The rest is down to your build tools.

[tbosch]

Just a bit more details:

1. You need to get hold of an NgModuleFactory (e.g. via loading a *.ngfactory.js file)
2. Call NgModuleFactory.create() -> NgModuleRef
3. Get ComponentFactory via NgModuleRef.componentFactoryResolver
4. Create the component

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}