Я предпочитаю следовать одному компоненту на модуль шаблон проектирования и использовать ленивые модули для функций с одним основным модулем, загружающим все.
Модуль main должен иметь наименьшее количество зависимостей, необходимых для запуска приложения, поскольку это повышает производительность загрузки, а маршрут top level должен быть загружен с отложенной загрузкой. Поэтому, когда приложение запускается, первой загруженной функцией является приложение main . Все остальные ленивые модули являются дочерними маршрутами.
A ленивый модуль должен иметь только outlet компонентов и услуг (поставщиков), необходимых для этой функции. Все остальные визуальные компоненты поступают из общей папки , содержащей один компонент на модуль каталогов.
Этот шаблон проектирования действительно следует руководству по проектированию но имеет более мелкое зерно модулей. Он создает больше стандартного кода и много других файлов, но есть и преимущества в обслуживании, и преимущества времени компиляции (т. Е. Встряхивание дерева гораздо эффективнее).
Типичная структура проекта для меня:
src/app
+-- lazy
+-- main
+-- shared
/src/app/lazy содержит подпапки из ленивых модулей . /src/app/main содержит AppModule, который загружается. /src/app/shared содержит подпапки один компонент на модуль каталоги
Типичный ленивый модуль будет иметь такую структуру
src/app/lazy/feature
+-- OutletFeature
+-- feature.module.ts
+-- feature-routing.module.ts
/src/app/lazy/feature содержит модуль и маршрутизацию /src/app/lazy/feature/OutletFeature является целевым компонентом для отложенного маршрута.
Функция lazy будет содержать охранников, преобразователей и службы. Вы также можете добавить дополнительные компоненты, если они уникальны для этой функции, но я стараюсь свести это к минимуму, потому что часто они заканчиваются тем, что повторно используются , когда подобная функция добавлено позже.
Папка shared содержит компоненты.
src/app/shared/Example
+-- Example/example.component.ts
+-- example.module.ts
Выше находится Пример компонента с модулем с тем же именем. Следуя шаблону каталога компонентов, папка с тем же именем содержит компонент. Общие модули не ограничиваются ограниченным одним компонентом, но потребитель компонента должен ожидать только одного компонента , экспортированного модулем. В примере таблицы общим компонентом будет таблица, но модуль может содержать внутренние компоненты для верхнего, нижнего и нижнего колонтитулов. Идея состоит в том, что модуль имеет одну цель.
Все вышесказанное является мнением, а руководство по стилю предлагает хороший шаблон для небольшого проекта. Я использовал вышеупомянутое в нескольких крупномасштабных приложениях и чувствую, что он очень хорошо масштабируется.
Angular Материал * Библиотека 1089 * использует один компонент на модуль как пример. У них есть собственный процесс сборки, который сначала делает структуру их исходного кода немного запутанной, но как только вы попадаете в раздел компонентов, все становится одним компонентом.
https://github.com/angular/components