BrowserModule, has a
routingmechanism and two components:
EagerComponent. For now, let's focus on the root component of our application (
AppComponent) where the navigation is defined.
lazy. To know what those paths are loading when clicking on them we need to take a look at the
routingobject that we passed to the root module.
eagerwhich will load
lazy, we are going to lazy load a module conveniently called
LazyModule. Look closely at the definition of that route:
importmethod that webpack utilizes to handle lazy loading, where we pass in the path to the module
LazyModuleother than it has its own
routingand a component called
If we define the class
defaultexport of the file, we don't need to define the class name in the
loadChildrenproperty as shown above.
routingobject is very simple and only defines the default component to load when navigating to the
forRootto create the routing object. We should always do that when creating a routing object for a feature module, no matter if the module is supposed to be eagerly or lazily loaded.
LazyComponentis very similar to
EagerComponentand is just a placeholder for some text.
AppComponentwill be loaded in the browser and we should see the navigation system and the text "Eager Component". Until this point, the
LazyModulehas not being downloaded, only when we click the link "Lazy" the needed code will be downloaded and we will see the message "Lazy Component" in the browser.