Перехід до автономних компонентів

У попередніх версіях Angular кожен компонент мав бути частиною модуля. Навіть найпростіший компонент не міг існувати окремо — його потрібно було оголошувати всередині NgModule.

Це було схоже на необхідність мати цілу кухню лише для того, щоб приготувати чашку чаю. Звучить громіздко, чи не так?

Саме тому з часом команда Angular почала спрощувати структуру. Це призвело до впровадження нового підходу — Standalone Components.

Що таке Standalone Component?

Щоб створити такий компонент, достатньо додати прапорець standalone: true у декоратор @Component та вказати необхідні залежності у масиві imports:

Додавання standalone: true — це спеціальна опція у декораторі @Component, яка повідомляє Angular, що цей компонент є незалежним — його не потрібно оголошувати в NgModule.

Також тут вказується перелік зовнішніх залежностей (imports), які потрібні компоненту. У традиційному підході на основі модулів ці залежності передавалися у імпорти модуля. Але коли компоненти працюють без модуля, їхні залежності потрібно оголошувати безпосередньо у компоненті — і Angular виступає як модуль внутрішньо для цього компонента.

Чому Angular відходить від NgModules?

NgModules відігравали важливу роль у великих застосунках:

• Допомагали організовувати код;

• Забезпечували контроль над областю видимості;

• Були корисними для оптимізації.

З часом стало очевидно, що багато з цих завдань можна виконувати на рівні компонентів — простіше та інтуїтивніше.

Іншими словами, автономні компоненти — це сучасний спосіб створення компонентів без модулів. Вони спрощують структуру, роблять компоненти самодостатніми та легшими у використанні.

Angular продовжує підтримувати модулі, але рекомендує використовувати автономні компоненти для нового коду.