Обычно разработчики Angular не используют библиотеки, но библиотеки Angular очень просты в использовании. Мы можем использовать библиотеки Angular в каждом приложении Angular, чтобы не повторяться. Когда разработчик запускает новое приложение, он обычно перемещает инфраструктуру из своих прошлых приложений. Почему мы не используем одну и ту же инфраструктуру для каждого приложения, более того, мы постоянно обновляем ее.
В этой серии статей мы создадим 3 библиотеки. Эти библиотеки будут называться core, bootstrap-ui и auth. Мы будем публиковать библиотеки как частные на Вердаччо. Мы будем использовать эти библиотеки в разных приложениях. Мы увидим, как сохранить эти библиотеки в разных версиях с помощью управления тегами.
Готовы ли вы получить хороший опыт? Давайте начнем!
Создадим отличный проект:
Перейдите в папку my-awesome-project в терминале (cd my-awesome-project). Затем выполните следующую команду.
ng g lib core
Базовая библиотека находится в самом центре проекта. Каждый пакет зависит от ядра. Ядро не должно зависеть от других пакетов. Я хочу пояснить на примере.
Ядро может зависеть от @ngrx/store, just-compare, ngx-context. Но не могу полагаться на нашу auth библиотеку.
Мы добавим в Ядро полезные директивы, каналы, сервисы, компоненты. Основная библиотека должна содержать файлы, которые могут использовать все пакеты. Это важный случай. В противном случае наша основная библиотека будет без необходимости расти.
Наша основная библиотека готова к использованию. Мы можем собрать библиотеку с помощью следующей команды.
ng build core
Это выглядит неплохо. Наши выходные файлы в папке dist/core. Библиотека готова к публикации в NPM. Никаких дополнительных настроек делать не нужно.
Хорошо, я хочу увидеть ядро во время выполнения. Итак, откройте app.module.ts, а затем импортируйте CoreModule.
Итак, как мы можем импортировать из core? Проверьте tsconfig.json. Angular CLI добавил несколько путей при создании библиотеки.
Мы можем добавить селектор ofCoreComponent в app.component.html
Запустите yarn start -o и вы увидите главную страницу.
Первая библиотека работает! Потрясающие!
Я предлагаю вам запускать yarn build --prod чаще. Иногда мы можем увидеть ошибку при сборке продукции из-за ng-packagr. Обратите внимание на импорт бочек в библиотеке. Нажмите, чтобы узнать об импорте бочки. Это могло быть решено.
Теперь мы можем редактировать нашу базовую библиотеку.
Удалите ненужные файлы ниже.
projects/core/src/lib/core.component.spec.ts projects/core/src/lib/core.component.ts projects/core/src/lib/core.service.spec.ts projects/core/src/lib/core.service.ts
Затем очистите CoreModule, public-api.ts и app.component.html. Вы можете увидеть последний код ниже.
Избавились от лишнего.
Теперь мы можем создать директиву. Я хочу создать директиву изображения по умолчанию. Задача этой директивы - показать изображение по умолчанию, когда image src не найден. Давайте создадим default-image.directive.ts в lib/directives папке.
Ага! Теперь добавьте объявления и экспортируйте директиву в core.module.ts
Хорошо, если вы хотите увидеть, как работает директива, продолжайте читать.
Я хочу создать домашний модуль. Потому что app.component.ts должен оставаться как можно меньше. router-outlet достаточно и нужно.
Выполните следующую команду для домашнего модуля.
ng generate module home --route home --module app.module
Заменить следующие маршруты в app-routing.module.ts
После этого добавьте CoreModule к импорту HomeModule.
Замените home.component.html на следующую строку
<img src="invalid-image" default="https://hmp.me/cobr" />
Теперь мы должны собрать Core для новых изменений. Запустите ng build core. После сборки мы можем запускать приложение.
Директива работает. Чудесно!
Заключение
Итак, в конце концов, мы создали и построили библиотеку с Angular CLI, и мы использовали библиотеку в нашем основном проекте. В качестве бонуса мы добавили default-image.directive. Не забывайте, что если вы вносите изменения в свою библиотеку, вы должны выполнить сборку. В следующей статье мы построим автоматически с помощью Symlink Manager.
Что дальше?
Вы найдете темы ниже в следующей статье.
- Как опубликовать библиотеку Angular
- Что такое Verdaccio, как опубликовать пакет в Verdaccio
- Как получить посылку на Вердаччо
- Как создать символическую ссылку для просмотра изменений
- Что такое Symlink Manager и как пользоваться
и более!
Призыв к действию
Следуйте за мной в Twitter, Github и Medium.
Жду ваших отзывов. Если вам понравилась эта статья, нажмите 👏
См. Https://github.com/abpframework/abp/tree/dev/npm/ng-packs/packages
Надеюсь, это будет полезно для вас.
Серия о построении реальной библиотечной структуры
- Создание реальной структуры библиотеки с помощью Angular - Часть I - ›Вы здесь
- Создание реальной структуры библиотеки с помощью Angular -Часть II- ›Скоро!
