ПРИМЕЧАНИЕ: статья относится к более ранним версиям Angular. После версии 6 мы можем создать библиотеку в Angular, используя команду ng generate library ‹library-name›. Подробнее об этом см. здесь: https://next.angular.io/guide/creating-libraries

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

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

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

Именно тогда на сцену выходят библиотеки и пакеты. В этом сообщении блога мы увидим, как создать библиотеку Angular и каковы требования для ее создания. Изучая больше библиотек Angular, я наткнулся на замечательный доклад Создавайте и публикуйте библиотеки Angular как профессионал от Juri Strumpflohner, в котором он объясняет необходимость библиотеки с этим изображением.

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

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

Библиотека должна быть:

  • Распространено
  • Независимая платформа
  • В комплекте
  • Поддержка предварительной компиляции
  • Работайте с TypeScript, выполняя проверку типов, автозаполнение и т. Д.

Все эти требования вместе составляют идеальную библиотеку Angular, и было разработано решение под названием Angular Package format для поддержки сборки библиотек Angular. Этот формат является рекомендуемым способом создания библиотек Angular и распространения пакетов. Библиотеки, созданные с использованием этого формата, будут правильно обрабатываться приложениями Angular, пакетами узлов, npm.

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

Шаги по созданию библиотеки Angular

  • Поскольку библиотека должна быть объединена в едином пакете, первым делом необходимо встроить все внешние шаблоны.
  • Следующим шагом будет его компиляция с помощью компилятора ngc, который является своего рода оболочкой для tsc. Ngc будет создавать файлы javascript из файлов машинописного текста, а также создавать файлы d.ts для предварительной компиляции путем создания метаданных для этой библиотеки.
  • Создавайте разные форматы ESM2015, UMD.

нг-пакагр

Мы можем разрабатывать библиотеки, используя ng-packagr, проект на nom и Github. Затем эти библиотеки можно поместить в формат пакета Angular. Библиотеки создают для нас все пакеты. Он используется различными загрузчиками модулей, сам встраивает шаблоны, создает определения типов (файлы .d.ts)

Чтобы установить ng-packagr с помощью npm, чтобы затем его можно было использовать глобально из командной строки,

$ npm установить -g ng-packagr

После его установки вы сможете увидеть его версию в файле package.json как зависимость.

Итак, задача состоит в том, чтобы создать файлы кода, которые имеют логику для нашего приложения (файлы .ts), файл .d.ts, который содержит точку входа в файл, и файлы метаданных, то есть package.json.

Внутри файла package.json нам нужно передать свойство ngPackage, которое будет содержать конфигурацию.

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

С этими тремя файлами мы можем продолжить, и мы помещаем эти три файла с помощью ng-packagr и получаем следующие файлы в качестве вывода.

  • *.d.ts
  • package.json
  • Связки
  • ESM2015
  • ESM5

Прежде чем продолжить, важно помнить следующее:

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

Теперь давайте, наконец, создадим одну библиотеку с помощью ng-packagr.

Нам нужно глобально установить Angular CLI на нашем компьютере. Когда у нас есть это, мы переходим к созданию нового проекта с помощью CLI, используя:

$ ng новый ‹project-name›

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

После создания нашего проекта мы переходим к созданию новой папки с папкой src внутри нее.

Наш код Angular находится внутри папки src. Создайте файл компонента со встроенным шаблоном.

Затем создайте файл модуля.

После того, как мы создали модуль и класс компонента, следующим шагом будет создание файла public_api.ts, который будет интерфейсом для библиотеки.

Внутри этого файла мы экспортируем и модуль, и данные компонента. Затем создайте файл конфигурации package.json.

Внутри файла package.json

Мы помещаем такие свойства, как имя, версия, peerDependencies и т. Д.

Теперь, чтобы подготовить файлы внутри папки lib к тому, чтобы они стали библиотекой, нам нужно выполнить несколько шагов.

  • Установите ng-packagr и tsickle с помощью npm

$ npm установить ng-packagr tsickle - -save-dev

  • Ссылка на файл package.json в папке lib внутри основного package.json

«Build-lib»: «ng-packagr -p lib-folder / package.json».

Теперь, чтобы использовать ng-packagr, нам нужно определить раздел внутри lib-folder / package.json и создать объект ngPackage.

Здесь мы даем имя входного файла и папку назначения.

К этому моменту все необходимые файлы для библиотеки Angular создаются вручную.

Давайте теперь запустим npm run build-lib в консоли и посмотрим, какие файлы он создает для нас:

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

Все файлы пакета, файлы esm2015, fesm2015 созданы и готовы к использованию в приложении Angular.

Теперь установите библиотеку внутри вашего приложения с помощью npm.

$ npm install ‹library-name› / ‹destination-folder-name›

Вы сможете увидеть установленную и созданную вами библиотеку внутри файла package.json.

И теперь вы сможете использовать эту библиотеку в своем приложении. Внутри appmodule импортируйте его, как и любую другую библиотеку, и используйте компонент из вашей библиотеки.

Зайдите в браузер, чтобы увидеть, дает ли компонент из библиотеки результат в вашем приложении Angular.

Ну вот! Вы создали свою первую простую библиотеку Angular, используя ng-packagr.