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

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

1	`ng generate library ngx-custom-lib`

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

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

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

1	`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 приложения.

1	`ng build ngx-custom-lib`

После этого ее можно использовать в приложении.

NgModule({
    imports: [NgxCustomLibModule],
});

В библиотеку включаются только те стили, которые напрямую прописаны в свойстве компонентов styleUrls.

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

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

1	`npm install scss-bundle -g`

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

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

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

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

Комментарии