Angular 8 延迟加载。有关问题：导入、入口组件和提供者

Question

我刚才已经超过了 2MB 标记，所以我决定实施延迟加载来处理我的大批量。因此，我对导入、entryComponents 和提供程序有疑问。将所有问题归结为一个问题：

我将什么导入应用程序-routing.module.ts以及将什么导入登录-routing.module.ts

因为我使用：

angular 模块
angular material 模块（mat 对话框，因此是入口组件）
众多服务（所有组件中只调用了一些）
其他 npm

这是我的应用-routing.module.ts:

const routes: Routes = [
  {
    path: '',
    component: AppComponent,
    children: [
      {
        path: '',
        pathMatch: 'full',
        redirectTo: '/login'
      },
      {
        path: '**',
        component: LoginComponent
      },
      {
        path: 'login',
        loadChildren: () => import('./account/login/login.module').then(m => m.LoginModule)
      }
    ]
  }
@NgModule({
  imports: [RouterModule.forRoot(routes, {useHash: true})],
  exports: [RouterModule]
})
export class AppRoutingModule { }

这是我的登录-routing.module.ts:

const routes: Routes = [
  {
    path: '',
    component: LoginComponent
  }
];

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

Answer 1

这是取决于您的用例的事情之一。为了减少包的大小，理想情况下，您将所有内容尽可能地推到模块树中。所以你 App.Module 里面只有很少的东西，你的大部分 imports/declarations/providers/entry 组件都在你的功能模块中。这包括除非需要，否则不要在根目录中注入您的服务，而是将它们设置在功能模块提供程序数组中。

不过需要权衡取舍。例如，理想情况下，您可以将 Angular material 模块导入到您的功能模块中，但是如果您要拥有很多功能模块，那么必须进入模块并添加会有点烦人为功能模块中需要的每个 Material 模块导入。另一方面，对于您的登录模块，您可能只需要几个 Material 模块，而您的整个应用程序可能需要一堆模块。

总而言之，如果您主要关心的是包大小，请将所有内容尽可能深地推送到模块树中。请注意，您在简化开发方面受到了轻微的打击。

因此，对于您提到的内容（Angular 模块、Angular Material 模块、服务和其他 NPM），您希望将它们尽可能地向下推到模块树中。请记住，对于 Singleton 服务，您需要在 app.module 中使用它们，因此它们仍然是 Singleton 服务。如果您将它们移动到功能模块中的提供者数组中，那么它们都将获得自己的实例。另一个值得注意的示例是 HttpClientModule，您只想在根目录中导入一次。

Angular 8 延迟加载。有关问题：导入、入口组件和提供者

Angular 8 Lazy Loading. Questions regarding: imports, entryComponents and providers

lazy-loading

angular2-providers

angular

angular8