如何从 Angular 库中只加载一个模块而不是所有模块答案

【问题标题】：How can I load only one module from Angular library instead of all modules如何从 Angular 库中只加载一个模块而不是所有模块
【发布时间】：2020-06-22 01:24:48
【问题描述】：

我已经生成了一个 Angular 库，并在其中创建了两个名为 Admin 和 Client 的模块。在每个模块中，我都有一项服务。

lib
   admin
      admin.service.ts
      amdin.module.ts
   client
      client.service.ts
      client.module.ts
public-api.ts

public-api.ts的内容是：

export * from './lib/admin/admin.module';
export * from './lib/admin/admin.service';

export * from './lib/admin/client.module';
export * from './lib/client/client.service';

然后：

ng build core

这样，如果我在AppModule 中导入AdminModule，如下所示：

import { AdminModlue } from 'core';

为什么 Angular 会加载 AdminModule 和 ClientModuel 及其服务，而它只能加载 AdminModule？

如果我们检查浏览器的“网络”选项卡，我们将在 main.js 中看到。

我怎样才能只加载AdminModule？

【问题讨论】：

为什么不为每个模块创建一个单独的库？
@R.理查兹-因为我有很多部分，不可能为每个部分创建一个库，然后有些部分很大，我想将它们拆分为库中的一些模块，以便在加载它们时具有完美的性能

标签： angular angular-library

【解决方案1】：

您需要研究延迟加载。有了它，您可以在需要时加载您的应用程序模块。但是您的第一个目标必须是将您的应用拆分为良好的域驱动模块，并配置您的主路由配置以使用 loadChildren 加载。

一些参考资料：

https://angular.io/guide/lazy-loading-ngmodules

https://khalilstemmler.com/articles/typescript-domain-driven-design/chain-business-logic-domain-events/

https://medium.com/angular-in-depth/angular-code-splitting-or-how-to-share-components-between-lazy-modules-432c755e389c

https://blog.bitsrc.io/boost-angulars-performance-by-lazy-loading-your-modules-ca7abd1e2304

【讨论】：

【解决方案2】：

不要在路由模块（app-routing-module.ts）中调用模块的任何组件。

只需通过loadChildren 方法调用。您也可以搜索延迟加载。

const routes: Routes = [
    { path: 'login', loadChildren: './login/login.module#LoginModule' },
];

【讨论】：