Question

我有一个用以下命令生成的角度库：

ng generate library cac-models

在该库中，我有两个名为Admin和Client Module的模块。当我想使用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

这样，我得到以下错误

找不到模块：错误：无法解析'cac-models / lib / admin / admin.module'

有可能吗？

Answer 1

如果要专门导入AdminModule，则这将是最终版本的一部分，并且所有无效代码都将被删除。这是摇树的一部分，您在这里https://webpack.js.org/guides/tree-shaking/

中了解到

Answer 2

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

-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

AdminModule：

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

ClientModule：

@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个导出的组件））

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

2 个答案: