Должен ли я создать модуль для каждого компонента в приложении Angular 4+?

У нас есть приложение Angular 4 среднего размера (+-150).

Многие из этих компонентов требуют ввода классов обслуживания и требуют объявления других компонентов в приложении.

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

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

Мой вопрос в том, какова эффективность (или другое) влияния наличия большого количества модулей?

Ответ 1

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

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

Сначала может показаться, что больше работы, но она вернет вам меньше проблем.

Если ComponentA зависит от ComponentB который зависит от ComponentC создайте a:

ModuleC связанный с ComponentC

ModuleB связанный с ComponentB который импортирует ModuleC

ModuleA связанный с ComponentA который импортирует ModuleB (ему не нужно напрямую импортировать ModuleC)

Если ComponentB теперь зависит от ComponentD (например, включая <my-component-d> в шаблоне) и останавливается в зависимости от ComponentC вы просто изменяете ModuleB и все компоненты, зависящие от ComponentB будут работать нормально, если вы используете этот подход.

Подумайте теперь о сотнях компонентов. Сколько компонентов будет зависеть от ComponentB?

Я рассматриваю эту проблему аналогично старому (или не слишком старому) включению js файлов в теги скриптов:

<script src="build/a.js"></script>
<script src="build/b.js"></script>
<script src="build/c.js"></script>

И если вы измените b на остановку в зависимости от c и начнете в зависимости от d, все страницы, которые импортируют b, теперь будут импортировать d и т.д., Что приведет к кошмару обслуживания. Вы также можете забыть удалить (теперь ненужные) c.js и импортировать его без необходимости на некоторых страницах, увеличивая время загрузки (или, что еще хуже, вы удаляете его из всех файлов, которые импортируют b.js, но некоторые страницы импортируют e.js что зависит от c.js и вы нарушаете некоторые функции этой страницы).

Вместо этого я считаю гораздо лучше импортировать:

<script src="build/bundle.js"></script>

или же

<script src="build/vendor.js"></script>
<script src="build/main.js"></script>

и зависимости обрабатываются модулем, таким как webpack.

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

Вы все же можете использовать подход одного компонента к модулю с функциональными модулями. Просто импортируйте компонентный модуль в модуль функций (вместо самого компонента):

feature.module.ts:

imports: [
    ComponentAModule,
    ComponentBModule,
    ComponentCModule,
]

(Вы также можете экспортировать их).

Я также рассматриваю этот подход наилучшим образом при создании библиотек, иначе вы заставите потребителей библиотеки импортировать все компоненты, даже если они используют только 1 или 2 компонента в библиотеке.

Я столкнулся с этой проблемой с ionic3: минерализованная ionic-angular библиотека имеет 437KB из которых 292KB являются компонентами (надеюсь, это изменится с помощью ionic4). Я использую только несколько ionic компонентов, им не нужно было импортировать все из них, но у меня нет выбора (если я не разблокирую репо или не прекращаю использовать его).

У меня есть приложение с 176 компонентами, и это был лучший подход, на мой взгляд. Раньше я включал несколько компонентов в функциональный модуль, и это дало мне некоторые головные боли позже. Кроме того, было труднее сменить компонент из функционального модуля на другой (а как его отношения? Все они были смешаны вместе).

Я не нашел удовлетворительного подхода к услугам (@Injectable()).

В конце концов это решение вам. Это мое мнение, основанное на моем опыте.