Создание Angular библиотек

Angular поддерживает создание переиспользуемых библиотек на уровне фреймворка. Библиотека представляет собой изолированный набор компонентов, сервисов, директив и пайпов, предназначенных для повторного использования в разных приложениях.

Архитектура Angular библиотеки

Библиотека создаётся и собирается с помощью Angular CLI и имеет строгую структуру:

projects/
  my-lib/
    src/
      lib/
        my-lib.module.ts
        components/
        services/
      public-api.ts

Ключевые элементы:

  • lib/ — исходный код библиотеки;
  • public-api.ts — публичный контракт;
  • ng-package.json — конфигурация сборки.

Создание библиотеки через Angular CLI

Angular CLI предоставляет встроенную поддержку:

ng generate library my-lib

В результате создаётся проект библиотеки, отделённый от основного приложения. Это позволяет:

  • изолировать зависимости;
  • тестировать библиотеку отдельно;
  • публиковать её как npm-пакет.

Public API и инкапсуляция

Файл public-api.ts определяет, какие сущности будут доступны потребителю библиотеки.

Пример:

export * from './lib/my-lib.module';
export * from './lib/components/button/button.component';

Всё, что не экспортировано, считается внутренней реализацией и недоступно извне.

Это обеспечивает:

  • контроль над API;
  • возможность безопасных изменений;
  • стабильность версий.

NgModule в библиотеке

Каждая библиотека должна предоставлять как минимум один NgModule.

@NgModule({
  declarations: [ButtonComponent],
  imports: [CommonModule],
  exports: [ButtonComponent]
})
export class MyLibModule {}

Особенности:

  • используются только необходимые модули;
  • запрещена привязка к конкретному приложению;
  • отсутствуют глобальные провайдеры без необходимости.

Сервисы и dependency injection

Сервисы в библиотеке регистрируются через providedIn:

@Injectable({
  providedIn: 'root'
})
export class ThemeService {}

Это позволяет:

  • избежать дублирования инстансов;
  • уменьшить размер бандла;
  • упростить интеграцию.

При необходимости сервис может предоставляться через модуль библиотеки.

Стили и инкапсуляция

Angular библиотеки поддерживают:

  • локальные стили компонентов;
  • глобальные стили библиотеки;
  • SCSS и CSS.

Стили компонентов инкапсулируются через ViewEncapsulation, что предотвращает конфликты.

@Component({
  encapsulation: ViewEncapsulation.Emulated
})

Сборка и формат выходных артефактов

Angular использует ng-packagr для сборки библиотек. Результат включает:

  • ES2015 и ES2020 модули;
  • typings (.d.ts);
  • metadata для Angular компилятора.

Это обеспечивает совместимость с:

  • Ivy;
  • tree-shaking;
  • AOT-компиляцией.

Версионирование и совместимость

Angular библиотеки строго привязаны к версии Angular:

  • мажорная версия библиотеки соответствует версии Angular;
  • breaking changes требуют повышения major-версии;
  • peerDependencies фиксируют допустимый диапазон.

Пример package.json:

"peerDependencies": {
  "@angular/core": "^17.0.0",
  "@angular/common": "^17.0.0"
}

Использование библиотеки в приложении

Подключение библиотеки происходит стандартным способом:

import { MyLibModule } from 'my-lib';

@NgModule({
  imports: [MyLibModule]
})
export class AppModule {}

Angular воспринимает библиотеку как полноценный модуль, включая её в процесс компиляции и оптимизации.

Поддержка standalone-компонентов

Современные Angular библиотеки могут экспортировать standalone-компоненты без NgModule:

@Component({
  standalone: true,
  selector: 'lib-card',
  imports: [CommonModule]
})
export class CardComponent {}

Это снижает связность и упрощает использование библиотеки в новых проектах.

Назначение библиотек в архитектуре

Angular библиотеки используются для:

  • дизайн-систем;
  • UI-китов;
  • инфраструктурных сервисов;
  • бизнес-модулей.

Они становятся фундаментом масштабируемых приложений, отделяя общее от прикладного и обеспечивая долгосрочную поддерживаемость кода.

Оглавление