In my previous company we created a project that was built with widgets.
A page was just a container with placeholder and in each placeholder there was a configurable widget that could be added or removed based on a json config file.
The main challenge was to load these widgets lazily and it was quite hard because cli was not able to do that by default so we end-up hacking the code a little bit creating the same approach of the routing.(https://angular.io/guide/lazy-loading-ngmodules)

Finally with the new version of cli we can achieve it without too much effort and quite easily.

As usual the first thing is to setup a new project with angular-cli (make sure that you have 6.0.1 installed):

When your project is up and running we need to create a new module and then a new component:


We need to apply some changes on the module and implement the loading in the component.
We start lazy.module.ts and we need to apply these small changes:

404: Not Found

We defined which one is our entryComponents and a static variable called `entry`.

Now that our module is ready we need to load it dynamically and lazy loading the resource on demand.

Open app.component.ts and copy that:

404: Not Found

Nothing new I can say. We created a viewChild called testOutlet and we load the module and the component.

We need to make the last change on the code to define the `testOutlet` in our template.
Open the app.component.html remove all the content and paste the follow code:

404: Not Found

We almost done it’s just missing the magic part: the cli configuration!

Open angular.json and in the build section paste the following:

404: Not Found

Now we can see the result running as usual:

And we’ll see our lazy loaded module:

 

In case of problem I just created a repro in my github! Feel free to download it!

If you enjoyed this post follow me on twitter @Dzurico

The post Angular – Lazy load modules with cli appeared first on Angular and Javascript blog.