Могу ли я иметь угловую библиотеку, которая испускает элементы Angular в одном файле js?

Введение

Здесь я опишу способ создания монорепозитория, содержащего основное приложение Angular (хост) и одно или несколько приложений на основе Angular Elements (дочерние элементы). Вы сможете использовать элементы в своем основном приложении, объединив их все вместе, или вы можете упаковать свой элемент с помощью npm и импортировать его как зависимость от npm. Это в значительной степени основано на том, что описано Манфредом Штайером в его Серия блогов об Angular Elements, поэтому я советую вам прочитать это, чтобы получить некоторый контекст и заполнить некоторые недостающие части.

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

Решение

В существующем проекте Angular вы можете создать дочернее приложение с ng generate application <name>. Дополнительные сведения см. В документации.

Превратите ваш недавно созданный проект в элемент Angular.

Чтобы помочь вам создавать свои проекты, обратите внимание на расширение Angular CLI ngx-build-plus здесь. В моем случае я не применил большую часть рецепта, описанного в ngx-build-plus документах, поскольку он касается разделения зависимостей между проектами, которые я не буду здесь подробно описывать. Все, что мне было нужно, это то, что следует.

Шаги по построению этой архитектуры примерно следующие:

• ng add ngx-build-plus
• ng add ngx-build-plus --project <name>
• create npm scripts:
  • for elements projects: "build:client-a": "ng build --prod --project client-a --single-bundle true --output-hashing none --vendor-chunk false"
  • для хост-приложения обычные команды сборки, такие как ng build, ng serve
• добавить путь к JS файлу сгенерированных элементов в конфигурацию сборки хост-приложения - вы добавляете его в свойство scripts в angular.json
• добавьте путь к файлу polyfill пользовательских элементов в конфигурацию сборки приложений элемента - вы добавляете его в свойство scripts в angular.json. Каждое приложение имеет свою собственную конфигурацию и запись скриптов.

После того, как вы создадите свой проект элементов, его единый пакет файлов обычно переходит в ./dist/<project-name>/. Вы можете создать пакет npm из этого контента и использовать его как библиотеку.

Примечания

• Два способа связать дочерние приложения с основным приложением. В конфигурации сценариев основного приложения вы либо добавляете путь к дочерним приложениям в папке dist/, либо добавляете путь к дочерним приложениям в папке node-modules/ (когда дочерние приложения импортируются как пакеты npm).

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

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

• Когда у вас есть компонент A, который включает компонент B. Вы хотите превратить компонент A в угловой элемент, но компонент B используется в нескольких частях вашего приложения. Если вы не хотите поддерживать две копии, одну в приложении, а другую в библиотеке компонента A, может быть хорошим случаем использовать воспользоваться преимуществами проецирования контента (также известного как слоты для веб-компонентов).

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