从Angular库中加载一个模块，而不是加载整个库 [英] Load one module from Angular Library Instead of loading the whole library

问题描述

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

I have an angular library that has been generated with the following command:

ng generate library cac-models

在此库中，我有两个名为Admin和Client Module的模块。当我想使用Admin模块时，必须像以下命令一样加载它，然后将其导入：

In this library, I have two modules named Admin and Client Module.When I'd like to use Admin module I have to load it like the following command and then import it:

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的。

This way, Angular loads the whole library (both admin and client module), because I import AdminModule from cac-models.

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

I'd like to load only the Admin Module. like below:

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

这样，我收到以下错误

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

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

有可能吗？

推荐答案

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

According to your question, you have the following structure in the projects folder :

-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 ：

AdminModule :

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

ClientModule：

ClientModule :

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

您的 public-api 应该类似于以下内容：

your public-api should be like the following:

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

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

then , build the cac-models library with the following command :

ng build cac-models

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

wherever you want to use only AdminModule, you have to import it like the following :

import { AdminModule } from 'cac-models';

也许你问自己，这里Angular加载了整个库，答案是：不，这里是Angular

maybe you ask your self, here Angular loads the whole library , the answer is : no , here Angular loads only AdminModule of cac-models instead the whole library .

进行测试：

在AppModule中导入AdminModule，仅加载cac-models的AdminModule。然后安装 Augury扩展以查看结果
（在这里您将看到角度加载整个库只安装了AdminModule（以及3个导出的组件））

import AdminModule in the AppModule then install Augury extension to see the result (here you will see that angualr loads only AdminModule(along with 3 exported components) insted of the whole library)

这篇关于从Angular库中加载一个模块，而不是加载整个库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！