The video I released this week was in part about routing with standalone components, and for the tip this week I wanted to focus in on that a little more.
I am going to highlight how routing with standalone components works in a real world application, and why I think it’s quite nice.
Previously, we relied on RouterModule.forRoot() and RouterModule.forChild() to define routes, which are used inside of modules, so obviously we need some new way to handle routes if we aren’t using modules.
The key idea is that Angular now allows us to use the loadChildren property to lazy load a set of routes directly without needing to create an NgModule.
For example, in our main.ts file we can bootstrap a root component (instead of a root module) and supply an initial set of routes using provideRouter like this:
In this particular case, I am bootstrapping the AppComponent which has the router outlet, but then that is loading the LayoutComponent which also has its own router outlet along with the layout stuff like a header and footer.
As you can see, we aren’t loading any modules here. If we look at the definition of layout.routes we can see it exports an array of routes rather than setting up a module with RouterModule.forChild():
The example application I built for the video this week doesn’t include a single NgModule but we are still able to do all the usual module stuff like lazy loading and route configuration which is pretty cool!