Angular 延迟加载重复模块

# Angular中延迟加载重复模块的解决方案

typescript
// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { CommonModule } from '@angular/common';
import { SharedModule } from './shared/shared.module';
import { HomeComponent } from './home/home.component';
const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'lazy', loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule.forRoot()) },
  // other routes...
];
@NgModule({
  imports: [
    CommonModule,
    SharedModule,
    RouterModule.forRoot(routes)
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

typescript
// lazy.module.ts
import { NgModule, ModuleWithProviders } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { LazyComponent } from './lazy.component';
import { SharedModule } from '../shared/shared.module';
const routes: Routes = [
  { path: '', component: LazyComponent },
  // other routes...
];
@NgModule({
  declarations: [LazyComponent],
  imports: [
    CommonModule,
    SharedModule,
    RouterModule.forChild(routes)
  ],
})
export class LazyModule {
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: LazyModule,
      providers: [
        // services or providers if any
      ]
    };
  }
}