0Pricing
Angular Academy · Урок

Создание библиотеки с помощью ng generate

Создавайте каркас проекта библиотеки

«Создание библиотеки с помощью ng generate» — бесплатный урок Angular Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Angular Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Angular Academy содержит 4 уроков всего.

Зачем создавать библиотеку

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

Рабочие пространства содержат библиотеки

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

ng new my-workspace --create-application=false
# a workspace with no app, ready to hold libraries

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

Схема ng generate library (псевдоним ng g lib) создаёт каркас нового проекта библиотеки в папке projects/.

ng generate library ui-kit
# creates projects/ui-kit with a sample component, module, and public-api.ts

Что создаётся

Библиотека содержит собственную папку src/lib, сводный файл public-api.ts, файл ng-package.json (для сборки) и запись в angular.json. Это самостоятельный проект, который можно собрать.

projects/ui-kit/
  src/
    lib/        # your components & services
    public-api.ts
  ng-package.json
  package.json

Добавление компонентов в библиотеку

Создавайте код в библиотеке, указав её с помощью --project. CLI помещает файлы в нужную папку.

ng generate component button --project=ui-kit
ng generate service theme --project=ui-kit

Автономные компоненты в библиотеках

Современные библиотеки предпочитают автономные компоненты, которые потребители импортируют напрямую, без NgModule. Укажите для компонента standalone: true, чтобы приложения могли использовать его с помощью простого импорта.

@Component({
  selector: 'lib-button',
  standalone: true,
  template: '<button class="lib-btn"><ng-content></ng-content></button>',
})
export class ButtonComponent {}

Файл package.json библиотеки

У каждой библиотеки есть собственный package.json, в котором указаны её имя, версия и зависимости равноправного уровня, такие как @angular/core. Такие зависимости означают, что Angular предоставляет приложение-потребитель, благодаря чему не создаются дубликаты.

{
  "name": "ui-kit",
  "version": "0.0.1",
  "peerDependencies": { "@angular/core": "^18.0.0" }
}

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

Держите демонстрационное приложение в том же рабочем пространстве, чтобы проверять библиотеку во время её создания. Импорт по имени библиотеки разрешается в локальный исходный код с помощью сопоставлений путей TypeScript в tsconfig.

Библиотека и приложение

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

Сохраняйте направленность библиотек

Хорошая библиотека имеет чёткое назначение (например, набор компонентов интерфейса или слой доступа к данным). Не объединяйте несвязанный код: согласованные библиотеки проще версионировать, документировать и повторно использовать.

Следующие шаги

После создания каркаса библиотеки остаётся определить её общедоступный API, собрать её в Angular Package Format и опубликовать. Каждому из этих шагов посвящены следующие уроки.

Быстрая проверка

Как создать библиотеку?

Итоги

Библиотеки упаковывают повторно используемый код для нескольких приложений. Создайте библиотеку с помощью ng generate library внутри рабочего пространства; эта команда создаёт src/lib, public-api.ts, ng-package.json и package.json с зависимостями равноправного уровня. Добавляйте код через --project, предпочитайте автономные компоненты и сохраняйте направленность каждой библиотеки.

Часто задаваемые вопросы

Урок «Создание библиотеки с помощью ng generate» бесплатный?

Да — полный текст урока «Создание библиотеки с помощью ng generate» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Angular Academy, подпишись на CoddyKit PRO. Курс Angular Academy содержит 4 уроков всего.

Чему я научусь в уроке «Создание библиотеки с помощью ng generate»?

Создавайте каркас проекта библиотеки Ты практикуешь Angular Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Angular Academy?

Предыдущий опыт не требуется. Angular Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «Создание библиотеки с помощью ng generate»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Angular Academy?

Да. Каждый урок Angular Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Создание библиотеки с помощью ng generate
  2. Публичный API и точки входа
  3. Сборка с помощью ng-packagr
  4. Публикация в npm
← Назад к Angular Academy