Блог

Я большой поклонник создания компонентов многократного использования, и мне еще предстоит выяснить правильный способ сделать это. Возможно ли вообще создавать автономные компоненты, которые можно просто вставить в другие приложения Angular, даже если у них есть зависимости, такие как Bootstrap или jQuery?

Пример: Я загрузил красивый шаблон веб-сайта, который я пытаюсь изменить и «разбить на части» для последующего повторного использования отдельных разделов веб-сайта. Это одностраничный веб-сайт, и, допустим, я хочу изолировать раздел «Свяжитесь с нами». Этот раздел сменяется анимацией, как только вы переходите к нему. В его HTML-компоненте есть классы Bootstrap 3, а анимация происходит из wowJS, который импортируется в index.html файл приложения angular.

Теперь, если бы я включил этот компонент section в другой проект, невозможно было бы определить, какие зависимости у него есть (если вы, конечно, не распознаете синтаксис Bootstrap 3 и wowJS в компоненте HTML). Также еще одна большая проблема: даже если я найду способ полностью изолировать компонент от остальной части веб-сайта, то после объединения нескольких компонентов на новый веб-сайт все распространенные зависимости будут загружаться несколько раз. Я предполагаю, что если вы используете инструменты только для Angular, то вполне возможно создавать пользовательские, полностью автономные повторно используемые компоненты. Но с внешними зависимостями все, что я могу сделать, это включить файл readme в каждый компонент и перечислить зависимости?

Я много гуглил по этой теме, но на самом деле не нашел ответов, которые искал. Надеюсь, кто-нибудь сможет мне помочь!

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

Но, согласно вашему примеру, вы должны управлять зависимостями вручную. Или, если вы можете отделить такие проблемы, как заголовок или панель навигации, вы можете создать пакет npm, совместимый с приложениями angular и имеющий их собственный packag.json, поддерживающий зависимости. Вот пакет: angular-package-builder

Возможно ли вообще создавать автономные компоненты, которые можно просто вставить в другие приложения Angular, даже если у них есть зависимости, такие как Bootstrap или jQuery?

Технически, да. Например, PrimeNG является библиотекой пользовательского интерфейса Angular и поставляется с некоторыми параметрами компонентов для построения графиков. Эти компоненты, в свою очередь, используют ChartsJS, другую стороннюю библиотеку, которую вам не нужно устанавливать вручную или даже поддерживать. PrimeNG заботится о своих собственных зависимостях.

… и допустим, я хочу изолировать раздел «Свяжитесь с нами»… Теперь, если бы я включил этот раздел component в другой проект, невозможно было бы определить, какие зависимости у него есть..

Это, скорее всего, источник вашей путаницы. Похоже, что в процессе разборки вы рассматриваете каждый компонент как отдельный «модуль» со своими собственными зависимостями. Вы берете компонент, который подчиняется уже определенным правилам (требует начальной загрузки и т.д.) И пытаетесь превратить его в автономный модуль. Типичный набор пользовательского интерфейса представляет собой набор «связанных» компонентов и пытается максимально объединить зависимости, чтобы все компоненты имели общие потребности. Я пытаюсь сказать, что прямо сейчас вы работаете в обратном направлении, начиная с конечного результата и пытаясь найти общие черты.