Angular 9: shared module multiple instance in memory

Question

Firstly, I tried all the questions & answers related to this topic. Additionally and I tried related questions and try to solve it but no success. So please read my question thoroughly.

Problem: shared Module 2 time add on memory. I want only one time.

I have created a small project using a lazy loading module. first, click to main module afterload module module1 using a lazy module. after inside again load module2 module. shared module import on module1 and module 2

Refer Link : Can lazy-loaded modules share the same instance of a service provided by their parent?

Angular 4 - Multiple instances of modules in memory

2 instances created on the shared module on Memory please see picture

Project Structure

Code

shared/shared

shared.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HelloWordlComponent } from './hello-wordl/hello-wordl.component';
@NgModule({
  declarations: [HelloWordlComponent],
  imports: [
    CommonModule,    
  ],
  exports:[HelloWordlComponent]
})
export class SharedModule { }

module1.component.html

<p>module1 works!</p>
<a [routerLink]="['module2']">Load  Module2</a>
<app-hello-wordl></app-hello-wordl>
<router-outlet></router-outlet>

module1-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { DashboardComponent } from './dashboard/dashboard.component';
import { Module1Component } from './module1.component';

const routes: Routes = [{
    path: '',
    component: Module1Component,
    children: [
    { path: '', component: DashboardComponent },
    {
        path: 'module2',
        loadChildren: () => import('./../module2/module2.module').then(m => m.Module2Module)
      
    }]
  }
  ];

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

module1.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SharedModule } from '../shared/shared.module';
import { DashboardComponent } from './dashboard/dashboard.component';
import { Module1RoutingModule } from './module1-routing.module';
import { Module1Component } from './module1.component';



@NgModule({
  declarations: [DashboardComponent, Module1Component],
  imports: [
    CommonModule,
    SharedModule,  //---> **shared Module Add**
    Module1RoutingModule,
  ]
})
export class Module1Module { }

module2-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { Module2Component } from './module2.component';
import { DashboardComponent } from './dashboard/dashboard.component';


const routes: Routes = [{
  path: '',
  component: Module2Component,
  children: [
  { path: '', component: DashboardComponent },
  {
    path: 'dashboard',component:DashboardComponent
    
  }]
}
];

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

module2.component.html

<p>module2 works!</p>
<app-hello-wordl></app-hello-wordl>
<router-outlet></router-outlet>

module2.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SharedModule } from '../shared/shared.module';
import { Module2Component } from './module2.component';
import { Module2RoutingModule } from '../module2/module2-routing.module';
import { DashboardComponent } from './dashboard/dashboard.component';



@NgModule({
  declarations: [Module2Component,DashboardComponent],
  imports: [
    CommonModule,
    SharedModule, // ---> **shared module add**
    Module2RoutingModule,
  ]
})
export class Module2Module { }