Angular 8 компонентов

Question

Какова была бы наиболее оптимальная структура для бизнес-проекта со многими компонентами (приблизительно 50)?

Что каждый компонент имеет свой собственный модуль?

src/
├── app
│   ├── app.component.html
│   ├── app.component.scss
│   ├── app.component.ts
│   ├── app.module.ts
│   ├── app-routing.module.ts
│   ├── components
│   │   ├── comp1
│   │   │   ├── comp1.component.ts
│   │   │   ├── comp1.module.ts
│   │   │   └── index.ts
│   │   ├── comp2
│   │   │   ├── comp2.component.ts
│   │   │   ├── comp2.module.ts
│   │   │   └── index.ts
│   │   ├── comp3
│   │   │   ├── comp3.component.ts
│   │   │   ├── comp3.service.ts
│   │   │   ├── comp3.module.ts
│   │   │   └── index.ts
│   ├── views
│   │   ├── admin
│   │   │   ├── admin.module.ts
│   │   │   ├── admin-routing.module.ts
│   │   │   ├── page1 <== Here I show comp1
│   │   │   ├── page2 <== Here I show comp2
│   │   │   ├── page3 <== Here I show comp3

Что модуль группирует все компоненты? в этом случае, каждый раз, когда вы загружаете модуль, он загружает все компоненты в этой памяти?

src/
├── app
│   ├── app.component.html
│   ├── app.component.scss
│   ├── app.component.ts
│   ├── app.module.ts
│   ├── app-routing.module.ts
│   ├── components
│   │   ├── comp1
│   │   │   ├── comp1.component.ts
│   │   ├── comp2
│   │   │   ├── comp2.component.ts
│   │   ├── comp3
│   │   │   ├── comp3.component.ts
│   │   │   ├── comp3.service.ts
│   │   ├── comps.module.ts <=== // group all components in one module
│   │   ├── index.ts
│   ├── views
│   │   ├── admin
│   │   │   ├── admin.module.ts
│   │   │   ├── admin-routing.module.ts
│   │   │   ├── page1 <== Here I show comp1
│   │   │   ├── page2 <== Here I show comp2
│   │   │   ├── page3 <== Here I show comp3

Любое предложение?

Answer 1

Нет строгих правил. Это зависит от компонентов.

Обычно это смесь. Компонент, представляющий «страницу» (например, маршруты верхнего уровня, такие как область администратора), является хорошим модулем. Для «меньших» компонентов, используемых только с одной страницы, имеет смысл поместить их в один и тот же модуль.

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

Размер компонентов также учитывается. Чем больше модуль получает, тем больше может быть полезно извлечь меньшие модули.

Answer 2

Да, в angular при загрузке модуля загружаются все его компоненты. Вы можете создавать функциональные модули для различных функций, которые вы не хотите загружать при запуске. (Это делается с помощью отложенной загрузки.)

Таким образом, структура будет выглядеть примерно так

Основной модуль -> Все компоненты, необходимые при запуске

Избранные модули -> Позже будет загружаться по требованию.

В angular9 они также предоставляют функцию для отложенных компонентов загрузки. Теперь вы можете лениво загружать компоненты, даже если модуль загружен. https://johnpapa.net/angular-9-lazy-loading-components/