Создание пользовательской библиотеки с помощью Angular

Создание пользовательской библиотеки с помощью Angular

От автора: привет, ребята, я хочу поговорить о пользовательских библиотеках. Я надеюсь, что к концу этой статьи вы поймете, как создать свою собственную библиотеку.

При первоначальном планировании архитектуры Angular вы можете обнаружить, что один из общих ресурсов должен использоваться несколькими приложениями. Вы хотите разместить его, например, в npm или, может быть, во внутреннем npm, который может использовать ваша компания. Таким образом, несколько приложений могут воспользоваться этим ресурсом. Звучит хорошо? Да, звучит здорово.

Создание пользовательской библиотеки

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

Бесплатный курс «NodeJS. Быстрый старт»

Изучите курс и узнайте, как создать веб-приложение с нуля на JavaScript с NodeJS

Получить курс

Сейчас у нас все должно быть хорошо. Однако теперь нам нужно использовать команду, которую CLI предоставляет в Angular 6 или выше, а именно ng generate. Эта библиотека ng generate предназначена для создания пользовательской общей библиотеки. Затем, после присвоения библиотеке имени она будет добавлена в отдельный проект, который называется рабочей областью.

Когда вы выполняете ng new, вы получаете рабочее пространство с одним проектом, которым является ваш веб-проект. ng generate добавит вторую версию в рабочую область, чтобы мы действительно могли протестировать библиотеку в приложении Angular без публикации в npm или любом другом ресурсе. Теперь она изменяет файл tsconfig, и он будет обновлен, чтобы проект Angular, отдельный проект в рабочей области, понимал, как добраться до библиотеки, общей библиотеки, которую мы собираемся создать.

Затем вы можете собрать свою библиотеку, используя команду ng build, а затем дать ей имя проекта, например:

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

Нам нужно сделать это, чтобы зайти в папку dist, там будет файл package.json. Он будет использоваться для публикации на npm. Нам нужно только ввести следующую команду:

Итак, должны ли мы увидеть, чем отличается наше решение? Поехали.

Итак, во-первых, вы заметите, что у нас есть папка projects. У нас также есть обновленный tsconfig, как вы можете видеть на следующем изображении:

Были добавлены пути к тому месту, где в конечном итоге мы собираемся создать папку dist после того, как выпоним сборку. И поэтому вам нужно сначала выполнить сборку, прежде чем вы сможете это сделать, потому что TypeScript на самом деле будет искать это, чтобы иметь возможность заставить все работать.

Теперь еще одна важная вещь, которая была сделана — это файл angular.json, в котором есть новый проект:

Бесплатный курс «NodeJS. Быстрый старт»

Изучите курс и узнайте, как создать веб-приложение с нуля на JavaScript с NodeJS

Получить курс

Итак, у нас есть вторичный проект прямо здесь, это наша braga-lib, и вы увидеть путь к корню проекта. Теперь все, что нужно для сборки и тестирования, включено. Итак, это основные вещи, которые изменились. Теперь мы можем внести изменения в нашу библиотеку. Итак, если мы зайдем в проект, мы увидим здесь обычные файлы и папку src, а затем добавляется библиотека, как вы можете видеть:

В библиотеке будет наш компонент, наш модуль и даже служба, если вы захотите. Если вы откроете файл компонента, он будет просто говорить «braga-lib works!»

Теперь обратите внимание на селектор «lib-braga-lib». Вы можете изменить его, но сейчас давайте оставим все как есть и используем его в нашем проекте Angular. Давай рассмотрим как? Ну, конечно!

Использование пользовательской библиотеки

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

Вы можете видеть, что тег нашей библиотеки становится красным. Это потому, что мы не импортировали модуль библиотеки. Это легко исправить. Мы можем перейти в app.module и добавить нашу библиотеку к импорту.

Здесь строка импорта — «../../projects/braga-lib/src/public-api». Они создали этот общедоступный API для экспорта того, что находится внутри этого конкретного общего компонента.

Как сказано выше, это общедоступная служба API. Обратите внимание, что общий модуль (наш модуль braga.lib) — это одна из экспортируемых вещей, и этого достаточно для данного упражнения. Мы можем вернуться к app.component.html, и красная линия исчезнет.

Теперь мы готовы. Сначала мы можем попытаться запустить проект, выполнив «ng serve -o», но мы получим ошибку, потому что у нас еще нет папки dist для нашей библиотеки. Итак, первое, что нам нужно сделать, это запустить «ng build braga-lib».

Теперь мы можем выполнить обычное «ng serve -o», чтобы запустить проект с библиотекой.

Как видите, теперь у нас есть общая библиотека внутри проекта Angular. С минимальными усилиями, буквально за несколько минут, вы можете запустить общую библиотеку. Последним шагом будет фактическая публикация в npm.

Заключение

Это очень полезно, когда вы вместе со своей командой планируете будущие внедрения. Теперь вы можете сказать: эти конкретные виджеты будут использоваться во многих наших приложениях, поэтому давайте просто спланируем создание библиотеки, а не будем размещать их в папке приложения, копируя и вставляя каждый раз!

Автор: André Braga

Источник: https://itnext.io

Редакция: Команда webformyself.

Бесплатный курс «NodeJS. Быстрый старт»

Изучите курс и узнайте, как создать веб-приложение с нуля на JavaScript с NodeJS

Получить курс

Angular 4 NgRx

Посмотрите видео по Angular 4 NgRx

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментирование закрыто.