从 Angular 库加载一个模块而不是加载整个库

Question

我有一个使用以下命令生成的 angular 库：

ng generate library cac-models

在这个库中，我有两个名为 Admin 和 Client 的模块 Module.When 我想使用 Admin 模块我必须像下面的命令一样加载它然后导入它：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AdminModule } from 'cac-models';  //=> this line

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

这样，Angular 加载整个库（管理和客户端模块），因为我从 cac-models 导入 AdminModule。

我只想加载管理模块。如下所示：

 import { AdminModule } from 'cac-models/lib/admin/admin.module'; // I get error

这样，我得到如下错误

Module not found: Error: Can't resolve 'cac-models/lib/admin/admin.module'

可以吗？

Answer 1

如果您专门导入 AdminModule，那将是最终构建的一部分，所有无用代码都将被删除。这是您在此处阅读的 tree shaking 的一部分 https://webpack.js.org/guides/tree-shaking/

Answer 2

根据您的问题，您在项目文件夹中具有以下结构：

-projects
---------cac-models
-------------------src
----------------------lib
-------------------------Admin(module)
--------------------------------------admin-component-one
--------------------------------------admin-component-two
--------------------------------------admin-component-three
-------------------------Client(module)
---------------------------------------client-component-one
---------------------------------------client-component-two
---------------------------------------client-component-three
----------------------public-api.ts

管理模块：

@NgModule({
  declarations:
    [
      AdminComponentOneComponent,
      AdminComponentTwoComponent,
      AdminComponentThreeComponent
    ],
  imports:
    [
      CommonModule
    ],
  exports:
    [
      AdminComponentOneComponent,
      AdminComponentTwoComponent,
      AdminComponentThreeComponent
    ]
})
export class AdminModule { }

客户端模块：

@NgModule({
  declarations:
    [
      ClientComponentOneComponent,
      ClientComponentTwoComponent,
      ClientComponentThreeComponent
    ],
  imports:
    [
      CommonModule
    ],
  exports:
    [
      ClientComponentOneComponent,
      ClientComponentTwoComponent,
      ClientComponentThreeComponent
    ]
})
export class ClientModule { }

您的 public-api 应该如下所示：

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

然后，使用以下命令构建 cac-models 库：

ng build cac-models

任何你想只使用 AdminModule 的地方，你必须像下面这样导入它：

import { AdminModule } from 'cac-models';

也许你问自己，这里 Angular 加载整个库，答案是：不，这里 Angular 只加载 cac-models 的 AdminModule 而不是整个库。

测试：

在 AppModule 中导入 AdminModule 然后安装 Augury extension 查看结果（在这里你会看到 angualr 只加载 AdminModule（连同 3 个导出的组件）insted 整个库）

从 Angular 库加载一个模块而不是加载整个库

Load one module from Angular Library Instead of loading the whole library

angular

angular-library