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

Начиная с версии Angular 6 стала доступна функция генерации Angular-библиотек с использованием @angular/cli. Сгенерировать библиотеку можно только в уже созданном проекте следующей командой:


ng generate library ngx-custom-lib
Здесь ngx-custom-lib - название вашей библиотеки.

Все сгенерированные библиотеки помещаются в директорию projects, а метаданные о библиотеке добавляются в angular.json в секцию projects.

Для создания в библиотеке с помощью @angular/cli, например, компонента, необходимо явно указать название проекта с помощью флага --project.


ng generate component <component-name> --project=<library-name>
Модули и относящиеся к ним компоненты, директивы, фильтры и сервисы определяются в папке lib и могут повторять структуру обычного приложения. Все сущности, предоставляемые модулем использующему его приложению, должны экспортироваться из public_api.ts.

public_api.ts


export * from './lib/ngx-custom-lib.service'
export * from './lib/ngx-custom-lib.component'
export * from './lib/ngx-custom-lib.module'
Сборка библиотек аналогична сборке обычного Angular приложения.


ng build ngx-custom-lib
После этого ее можно использовать в приложении.


NgModule({
imports: [NgxCustomLibModule],
})
В библиотеку включаются только те стили, которые напрямую прописаны в свойстве компонентов styleUrls.

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

Разберемся на примере scss. В качестве сборщика будем использовать scss-bundle, который нужно установить в системе глобально:


npm install scss-bundle -g
Создадим в исходных файлах библиотеки директорию assets/styles, а внутри нее файлы стилей - entry.css, style1.scss и style2.scss. Причем последние два импортируются в первый.

Теперь выполним сборку стилей.


scss-bundle -e ./src/entry.scss -d bundles/main.style.scss
В параметре -e указывается список файлов, которые должны быть объединены в файле, указанном в параметре -d. Результирующий файл создастся по указанному пути.

Затем в приложении можно импортировать стили, например, в глобальный файл style.scss:


@import '../projects/dist/ngx-custom-lib/bundles/main.style';
Если исходных файлов стилей в библиотеке много, то scss-bundle позволяет в качестве источника указывать файл конфигурации, в котором перечисляются все необходимые стили.