Lazy loading

Notice that the lazy loading syntax uses loadChildren followed by a function that uses the browser’s built-in import(‘…’) syntax for dynamic imports.

forRoot() and forChild()link

You might have noticed that the CLI adds RouterModule.forRoot(routes) to the app-routing.module.ts importsarray. This lets Angular know that this module, AppRoutingModule, is a routing module and forRoot() specifies that this is the root routing module. It configures all the routes you pass to it, gives you access to the router directives, and registers the RouterService. Use forRoot() in the AppRoutingModule—that is, one time in the app at the root level.

The CLI also adds RouterModule.forChild(routes) to feature routing modules. This way, Angular knows that the route list is only responsible for providing additional routes and is intended for feature modules. You can use forChild() in multiple modules.

forRoot() contains injector configuration which is global; such as configuring the Router. forChild() has no injector configuration, only directives such as RouterOutlet and RouterLink.