Загрузить один модуль из библиотеки Angular вместо загрузки всей библиотеки

У меня есть угловая библиотека, созданная с помощью следующей команды:

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 загружает всю библиотеку (как админский, так и клиентский модуль), потому что я импортирую AdminModule из cac-моделей.

Я хочу загрузить только модуль администратора. как показано ниже:

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

Таким образом, я получаю следующую ошибку

Модуль не найден: ошибка: не удается разрешить cac-models / lib / admin / admin.module

Возможно ли это сделать?


angular angular-library
person AbolfazlR    schedule 22.08.2019    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Если вы импортируете только AdminModule, он будет частью окончательной сборки, а весь мертвый код будет удален. Это происходит как часть встряхивания дерева, о котором вы читаете здесь https://webpack.js.org/guides/tree-shaking/

person Barkha    schedule 22.08.2019
comment
@ Barkha: Спасибо, твое объяснение потрясающее. В режиме разработки angular загружает все из нашей пользовательской библиотеки, но в производственном режиме Angular загружает только все, что необходимо. - person AbolfazlR; 25.06.2020

arrow_upward
0
arrow_downward

Согласно вашему вопросу, у вас есть следующая структура в папке проектов:

-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 загружает только AdminModule cac-моделей, а не всю библиотеку.

для теста:

импортируйте AdminModule в AppModule, затем установите расширение Augury, чтобы увидеть результат (здесь вы увидите, что angualr загружает только AdminModule (вместе с 3 экспортированными компонентами) вместе со всей библиотекой)

person AbolfazlR    schedule 08.01.2020