main.js) - become as small as possible, so that our app can boot up really fast. This is when "lazy loading" comes into play. And with lazy loading we really mean to defer loading unused bits & just load them on demand.
Great, so now we know what lazy loading is, but before we dive straight in, let's first define what can be lazy loaded in an Angular application. You might be tempted to say "I want to lazy load an Angular component", right? After all that's what you want to visualize at a given moment. However, that's not entirely possible.
The basic unit in Angular is a module. If you think about your Angular components, they have dependencies on other components, like Angular Material. But the component itself doesn't specify those dependencies. Rather components are all registered on modules which are then connected between them. As of now (Angular version 7), modules are necessary for Angular in order to "know" how your code works, which dependencies are needed, which components are used in the templates.
"The basic unit that can be lazy loaded are NgModules"
And with them - of course - come the bundled components which we're ultimately interested in.
Learn how to lazy load
- via Angular Routing
- manually lazy load components
- lazy load Angular Components as Angular Elements