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

Вы можете создавать и публиковать новые библиотеки для расширения функциональности Angular. Если вы обнаружите, что вам нужно решить одну и ту же проблему в нескольких приложениях (или вы хотите поделиться своим решением с другими разработчиками), у вас есть кандидат в библиотеку.

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

Начиная

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

``ng generate library my-lib``

Эта команда создает папку projects / my-lib в вашей рабочей области, которая содержит компонент и сервис внутри NgModule. Файл конфигурации рабочей области angular.json будет автоматически обновлен с проектом типа «библиотека».

Вы можете собрать, протестировать и выполнить проект с помощью команд консоли:

``` ng build my-lib
ng test my-lib
    ng lint my-lib ```

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

Помимо сборки и компиляции, чтобы сделать библиотечный код многократно используемым, вы должны определить для него публичный API. Этот «пользовательский уровень» определяет, что доступно потребителям вашей библиотеки. Пользователь вашей библиотеки должен иметь доступ к общедоступным функциям (таким как NgModules, поставщики услуг и общие функции утилит) через единый путь импорта.

Публичный API для вашей библиотеки поддерживается в файле `public-api.ts` в вашей папке библиотеки. Все, что экспортируется из этого файла, становится общедоступным, когда ваша библиотека импортируется в приложение. Используйте NgModule для предоставления услуг и компонентов.

В дополнение к общедоступному API хорошая документация очень важна для пользователей, которые будут использовать вашу библиотеку. Ваша библиотека должна предоставить подробную документацию (обычно файл README) для установки и обслуживания.

Рефакторинг частей приложения в библиотеку

Рабочее приложение может быть преобразовано в библиотеку или части рабочего приложения также могут быть преобразованы в библиотеку. Чтобы сделать ваше решение многоразовым, вам нужно настроить его так, чтобы оно не зависело от кода приложения. Вот несколько вещей, которые следует учитывать при переносе функциональности приложения в библиотеку.

• Такие объявления, как компоненты и каналы, должны проектироваться как не имеющие состояния, то есть они не зависят от внешних переменных и не изменяют их. Если вы полагаетесь на состояние, вам нужно оценить каждый случай и решить, будет ли это состояние приложения или состояние, которым будет управлять библиотека.
• Любые наблюдаемые, на которые компоненты подписываются внутри, должны быть очищены и утилизированы в течение жизненного цикла этих компонентов.
• Компоненты должны раскрывать свои взаимодействия через входные данные для обеспечения контекста и выходные данные для передачи событий другим компонентам.
• Службы должны объявлять своих собственных провайдеров (а не объявлять провайдеров в модуле NgModule или компоненте), чтобы их можно было использовать в древовидной структуре. Это позволяет компилятору оставить сервис вне пакета, если он никогда не внедряется в приложение, импортирующее библиотеку.
• Множественные регистрации NgModule должны выполняться с использованием шаблонов forRoot () и forChild (), предоставляемых RouterModule.
• Проверьте все внутренние зависимости.
• Для пользовательских классов или интерфейсов, используемых в компонентах или службе, проверьте, зависят ли они от дополнительных классов или интерфейсов, которые также необходимо перенести.
• Точно так же, если код вашей библиотеки зависит от службы, ее необходимо перенести.
• Если код вашей библиотеки или ее шаблоны зависят от других библиотек (например, Angular Material), вы должны настроить свою библиотеку с учетом этих зависимостей.

Многоразовый код и схемы

Библиотека обычно включает в себя повторно используемый код, который определяет компоненты, службы и другие угловые артефакты (каналы, директивы и т. Д.), Которые вы просто импортируете в проект. Библиотека упакована в пакет npm для публикации и совместного использования, и этот пакет может также включать схемы, которые предоставляют инструкции для генерации или преобразования кода непосредственно в вашем проекте, точно так же, как CLI создает универсальное скелетное приложение с компонентом ng generate. Схема, объединенная с библиотекой, может, например, предоставить Angular CLI информацию, необходимую для создания конкретного компонента, определенного в этой библиотеке.

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

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

Интеграция с CLI

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

• Включите схему установки, чтобы ng add мог добавить вашу библиотеку в проект.
• Включите схемы генерации в свою библиотеку, чтобы ng generate могла создать ваши определенные артефакты (компоненты, сервисы, тесты и т. Д.) В проекте.
• Включите обновленную схему, чтобы ng update мог обновлять зависимости вашей библиотеки и обеспечивать миграцию для устранения изменений в новых выпусках.

Публикация вашей библиотеки

Используйте Angular CLI и менеджер пакетов npm, чтобы собрать и опубликовать свою библиотеку как пакет npm. По умолчанию библиотеки создаются в режиме AoT, поэтому вам не нужно указывать флаг -prod при сборке для публикации.

```ng build my-lib
cd dist/my-lib
npm publish```

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

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

Вам не нужно публиковать свою библиотеку в менеджере пакетов npm, чтобы использовать ее в своих собственных приложениях, но сначала вам нужно ее собрать.

Чтобы использовать свою собственную библиотеку в приложении:

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

```ng build my-lib```

В ваших приложениях импортируйте из библиотеки по имени:

```import { myExport } from 'my-lib';```

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

Шаг сборки важен, если вы не опубликовали свою библиотеку как пакет npm, а затем установили пакет обратно в приложение из npm. Например, если вы клонируете свой git-репозиторий и запускаете npm install, ваш редактор покажет импорт my-lib как отсутствующий, если вы еще не создали свою библиотеку.

Когда вы импортируете что-то из библиотеки в приложении Angular, Angular ищет соответствие между именем библиотеки и местоположением на диске. Когда вы устанавливаете пакет библиотеки, сопоставление находится в папке node_modules. Когда вы создаете свою собственную библиотеку, она должна найти отображение в ваших путях tsconfig.

Генерация библиотеки с помощью Angular CLI автоматически добавляет ее путь в файл tsconfig. Angular CLI использует пути tsconfig, чтобы сообщить системе сборки, где найти библиотеку.

Если вы обнаружите, что изменения в вашей библиотеке не отражены в вашем приложении, ваше приложение, вероятно, использует старую сборку библиотеки.

Вы можете перестраивать свою библиотеку всякий раз, когда вносите в нее изменения, но этот дополнительный шаг требует времени. Добавочная функциональность сборки улучшает опыт разработки библиотеки. Каждый раз, когда файл изменяется, выполняется частичная сборка, которая генерирует исправленные файлы.

Инкрементные сборки могут быть запущены как фоновый процесс в вашей среде разработки. Чтобы воспользоваться этой возможностью, добавьте флаг --watch к команде build:

ng build my-lib --watch

Предыдущая: Схемы
Далее: Использование опубликованных библиотек