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

Начиная с версии 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 позволяет в качестве источника указывать файл конфигурации, в котором перечисляются все необходимые стили.

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

Комментарии