typescript - 如何在 Angular 中延迟加载共享组件？

我有一个组件 CompA，它被用于两个懒加载模块 LazyModuleA 和 LazyModuleB 中。我知道创建一个 SharedModule 并在两个懒加载模块中导入它的方法是可行的。但是 SharedModule 不是懒加载的，会被打包进 main.js。

有没有一种方法可以让 CompA 懒加载，同时可以在懒加载模块之间共享？

答案＃1

我认为你把 shared 模块和 lazy 加载模块弄混了 -

懒加载模块仅在需要时被调用，而共享模块则完全不同。

让我们来看共享模块——在你的应用程序中，如果你有大约3个模块，并且这三个模块都依赖于相同的组件、指令或模块，与其在每个模块中都导入这些内容，你可以只在你的shared模块中导入它们，然后在所有模块中映射它们

应用模块（根模块）

@NgModule({
  declarations: [],
  imports: [
    BrowserModule,
    HttpClientModule,
    FormsModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

懒加载模块

@NgModule({
  imports: [
    CommonModule,
    HttpClientModule,
    FormsModule,
    BoatsManagerRoutingModule,
  ],
  declarations: [],
  providers: []
})
export class LazyModule { }

检查上面的模块——你可能会看到 HttpClientModule 和 FormsModule 通常会在这两个模块中导入，现在 Shared 模块的作用就体现出来了

共享模块

 @NgModule({
     imports: [
       CommonModule,
       HttpClientModule,
       FormsModule,
     ],
     declarations: [],
     providers: [],
     exports: [
     HttpClientModule,
     FormsModule
    ]
  })
  export class SharedModule { }

现在我已经在一个 Shared 模块中导入了这两个模块，然后将它们导出，同样的方式，如果你有任何组件或指令是两者共有的，可以在共享模块中声明并导出它们——现在你唯一需要做的就是在上面创建的 Shared 模块中直接导入到 AppModule 和 LazyModule 中，然后你将可以访问 HttpClientModule 和 FormsModule。

所以这就是 SharedModule 的用法，没有必要对共享模块进行懒加载，因为它会被导入到各个模块中并获得访问权限

最后加载 Lazy 模块，你可以在路由上使用 loadChildern 属性来懒加载该模块

  {
    path: 'lazy',
    loadChildren: './folder/Lazy.module#LazyModule',
  }

希望这能解决你的问题——编程愉快！！