Angular 8延迟加载。有关以下问题：进口，进入组件和提供者

Question

我前一阵子已经超过2MB，所以我决定实施惰性加载来处理我的大量任务。因此，我对导入，entryComponents和提供程序有疑问。将所有内容归纳为一个问题：

我将什么导入到app-routing.module.ts中，什么导入到login-routing.module.ts

因为我使用：

• 角度模块
• 角形材料模块（mat对话框，因此是输入组件）
• 大量服务（在所有组件中仅调用某些服务）
• 其他npms

---

这是我的app-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 { }

---

这是我的login-routing.module.ts：

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

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

---

Answer 1

这是取决于您的用例的事情之一。为了减小包的大小，理想情况下，您要尽可能地将所有内容推入模块树中。因此，您的App.Module几乎没有，而大多数导入/声明/提供者/输入组件都位于功能模块中。这将包括除非必要，否则不将服务注入根目录，而是在功能模块提供者数组中进行设置。

尽管需要权衡取舍。例如，理想情况下，将Angular材质模块导入到特征模块中，但是如果要使用很多特征模块，则不得不进入该模块并为其添加导入内容有点烦人功能模块中需要的每个材料模块。另一方面，对于您的登录模块，您可能只需要几个物料模块，而您的整个应用程序可能需要一堆。

总结一下，如果您主要考虑软件包的大小，则将所有内容都尽可能深入地推入模块树中。只是要注意，为了减轻开发难度，您受到了一些打击。

因此，对于您提到的内容（角度模块，角度材料模块，服务，其他NPM），您希望将它们尽可能地推入模块树中。请记住，对于Singleton服务，您需要在app.module中将它们保留为Singleton服务。如果将它们移到功能模块中的providers数组中，则它们都将获得自己的实例。另一个值得注意的示例是HttpClientModule，您只想在根目录中导入一次。