Уявіть, що ви створюєте застосунок. Спочатку це лише один файл — наприклад, main.ts. Але з часом ви додаєте більше: компоненти, сервіси, стилі, логіку, обробку даних, автентифікацію тощо.

Рано чи пізно все стає заплутаним — важко зрозуміти, що і де використовується, або як усе пов’язано між собою.

Саме тоді модульність стає вашим найкращим помічником.

Що таке модуль в Angular?

Уявіть собі модуль як коробку, у якій зберігається все, що стосується певної функціональності. Наприклад, усі елементи, пов'язані з користувачем, можуть бути розміщені у UserModule.

В Angular модуль — це просто клас, позначений декоратором @NgModule, наприклад:

Опис призначення кожної частини:

• declarations – перелік компонентів, директив і пайпів, що належать цьому модулю;

• imports – підключає інші модулі, від яких залежить цей модуль (наприклад, BrowserModule для доступу до DOM);

• providers – оголошує сервіси (для впровадження залежностей), доступні в цьому модулі;

• bootstrap – визначає головний компонент, який завантажується при старті застосунку (зазвичай AppComponent).

Модуль визначає, які залежності він приймає, що надає іншим модулям тощо.

Будь-які компоненти, що взаємодіють із цим модулем, можуть використовувати сервіси та інші ресурси, які він надає.

Чому ми зараз не використовуємо модулі

Починаючи з Angular 14, з’явилася нова альтернатива — автономні компоненти.

Вони дозволяють створювати та використовувати компонент без необхідності додавати його до модуля. Ми вже використовували їх у нашому проєкті, і виглядають вони ось так:

Це автономний компонент — тобто його не потрібно додавати до жодного NgModule у declarations. Замість цього все необхідне (наприклад, директиви, пайпи чи інші модулі) підключається безпосередньо через властивість imports у самому компоненті.

Це робить структуру проєкту легшою та гнучкішою — особливо корисно для невеликих застосунків або ізольованих функціональних блоків.

Хоча в нових проєктах Angular модулі вже не є обов'язковими, ви все одно часто з ними стикатиметесь:

• Старі корпоративні застосунки повністю побудовані на модулях;

• Багато навчальних матеріалів, документації та прикладів усе ще написані з використанням NgModule;

• Деякі сторонні бібліотеки та UI-фреймворки досі використовують підхід на основі модулів.