May 21, 2018
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):
ng new lazyApp
When your project is up and running we need to create a new module and then a new component:
ng g module lazy ng g component lazy
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:
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:
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:
We almost done it's just missing the magic part: the cli configuration!
Open angular.json and in the build section paste the following:
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