Optimizing the usage of common modules – the SharedModule pattern

If we look at Angular projects, we will see patterns of use of modules such as HttpModule, as in the following example:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HomeComponent } from './home/home.component';
import { LayoutModule } from '@angular/cdk/layout';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatButtonModule } from '@angular/material/button';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatIconModule } from '@angular/material/icon';
import { MatListModule } from '@angular/material/list';
@NgModule({
 declarations: [HomeComponent],
 imports: [
   CommonModule,
   LayoutModule,
   MatToolbarModule,
   MatButtonModule,
   MatSidenavModule...