Lazy loading in angular routing

By default, NgModule is loaded acutely, which means that it will be loaded as soon as the application loads. This is true for all modules, regardless of whether they are used immediately or not. For large applications with many routes, consider using lazy loading-a mode of loading NgModule on demand. Lazy loading can reduce the size of the initial package, thereby reducing loading time.

In app.modules:

const routes: Routes = [
  {
    path: 'items',
    loadChildren: () => import('./items/items.module').then(m => m.ItemsModule)
  }
];

loadChildren is a property of the route, which receives a callback function, which allows Angular to call this callback function when there is a demand, thus realizing lazy loading. After that is a function that uses the browser's built-in import('...') syntax for dynamic import. The import path is the relative path to the current module.

m => m.ItemsModule This is also a callback function. The parameter m represents the file that was imported successfully, so you can use any legal key to replace it, for example: f => f.ItemsModule. m.ItemsModule represents the corresponding ItemsModule class in the file.

then() method is executed asynchronously, that is, when the method before .then() is executed, the program inside then() is
This avoids the problem of not getting the data.

Now take a closer look at the loadchildren method:

The LoadChildren function returns a set of routes to be loaded.
Clicking on this method, we find that it is defined like this

type LoadChildren = LoadChildrenCallback;

LoadChildrenCallback is a callback function, which is called to parse the lazily loaded route collection.

Angular will add RouterModule.forRoot(routes) to the imports array of AppRoutingModule. This will let Angular know that AppRoutingModule is a routing module, and forRoot() means that it is a root routing module.

It will configure all your incoming routes, allow you to access router commands and register Router. forRoot() should only be used once in an application, which is in this AppRoutingModule.

Angular will also add RouterModule.forChild(routes) to each feature module. In this way, Angular will know that this routing list is only responsible for providing additional routing and its design intent is to be used as a feature module. You can use forChild() in multiple modules.

forRoot() method manages the global injector configuration for the router. There is no injector configuration in the forChild() method, only instructions like RouterOutlet and RouterLink.

The Router service is provided in RouterModule, and there are also some routing instructions, such as RouterOutlet and routerLink. The root module of the application imports the RouterModule so that there is a Router service in the application and allows the root component of the application to access various router instructions. Any feature module must also be imported into RouterModule, so that these router instructions can be used in their component templates.

If the RouterModule does not have forRoot(), then each feature module will instantiate a new Router instance, which will destroy the normal logic of the application, because there can only be one Router instance in the application. By using the forRoot() method, RouterModule.forRoot(...) will be imported into the root module of the application to obtain a Router instance, and all feature modules need to import RouterModule.forChild(...), it will not be an instance Change another Router. This is also a manifestation of the singleton pattern, that is, all modules share this router instance.

How forRoot() works

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})

The official comment is:
Create a module that contains all router instructions and provider registration routes without creating a new router service. When registering submodules and lazy loading submodules, create NgModule as follows:

@NgModule({
  imports: [RouterModule.forChild(ROUTES)]
})
class MyNgModule {}

forRoot() will accept a service configuration object and return a ModuleWithProviders object with the following properties:

• ngModule: In this example, it is the NgModule class.
• providers-configured service providers

The forRoot() method manages the global injector configuration for the router. There is no injector configuration in the forChild() method, only instructions like RouterOutlet and RouterLink.

How forChild() works

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})

static forChild(routes: Routes): ModuleWithProviders<RouterModule>;

Forchild will receive the configured routing information and return a ModuleWithProviders object, which is the Router instance generated when forRoot is called, and forchild adds its own part of the content to this instance.

And this is connected with the loadchildren() mentioned earlier. When loadchildren is called, the system will find the part of the content added by forchildren in this router instance to realize the on-demand loading function.

Finally, AppRoutingModule declares RouterModule in exports, which is equivalent to transferring RouterModule to AppModule