Angular 9：内存中的共享模块多实例_Angular_Memory_Memory Management_Memory Leaks_Angular9

Angular 9：内存中的共享模块多实例

angular memory memory-management memory-leaks

Angular 9：内存中的共享模块多实例,angular,memory,memory-management,memory-leaks,angular9,Angular,Memory,Memory Management,Memory Leaks,Angular9,首先，我尝试了所有与这个主题相关的问题和答案。此外，我尝试了相关的问题，并试图解决它，但没有成功。所以请仔细阅读我的问题问题：共享模块2时间附加内存。我只想要一次我已经创建了一个使用延迟加载模块的小项目。首先，使用惰性模块单击主模块后加载模块模块1。之后再次装入模块2模块。模块1和模块2上的共享模块导入参考链接： 2个在内存共享模块上创建的实例请参见图片项目结构代码共享/共享共享的.module.ts import { NgModule } from '@angular/

首先，我尝试了所有与这个主题相关的问题和答案。此外，我尝试了相关的问题，并试图解决它，但没有成功。所以请仔细阅读我的问题

问题：共享模块2时间附加内存。我只想要一次

我已经创建了一个使用延迟加载模块的小项目。首先，使用惰性模块单击

主模块

后加载模块模块1。之后再次装入

模块2

模块。 模块1和模块2上的共享模块导入

参考链接：

2个在内存共享模块上创建的实例请参见图片

项目结构

代码

共享/共享

共享的.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 { }

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 { }

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 { }

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 { }

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 { }

module1.component.html

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

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

module1.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 { }

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 { }

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 { }

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 { }

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 { }

module2路由.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 { }

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 { }

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 { }

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 { }

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 { }

module2.component.html

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

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