Angular, один из самых популярных фреймворков для разработки одностраничных приложений (SPA), постоянно развивается, добавляя новые возможности и улучшая существующие. Одной из таких новых возможностей стали Standalone компоненты, представленные в Angular 14.

Что такое Standalone компоненты?

Standalone компоненты — это компоненты, которые могут использоваться без необходимости добавления их в модуль. Традиционно, в Angular каждый компонент должен быть объявлен в модуле (например, AppModule), чтобы его можно было использовать в приложении. Standalone компоненты позволяют упростить эту архитектуру, делая компоненты более автономными и модульными.

Преимущества Standalone компонентов

1. Упрощенная архитектура: Уменьшает количество связей между модулями и компонентами.

2. Уменьшение размера бандла: За счет того, что модули становятся менее громоздкими, уменьшается размер финального бандла.

3. Лучшая модульность: Упрощает создание и использование повторно используемых компонентов.

Создание Standalone компонента

Для создания Standalone компонента необходимо использовать свойство standalone в декораторе @Component. Рассмотрим пример создания простого Standalone компонента.

Шаг 1: Создание компонента

Создадим новый компонент, используя Angular CLI:

ng generate component standalone-example --standalone

Шаг 2: Настройка компонента

Angular CLI автоматически добавит свойство standalone: true в декоратор @Component:

import { Component } from '@angular/core';

@Component({
selector: 'app-standalone-example',
templateUrl: './standalone-example.component.html',
styleUrls: ['./standalone-example.component.css'],
standalone: true
})
export class StandaloneExampleComponent {
// Логика компонента
}

Шаг 3: Использование Standalone компонента

Теперь Standalone компонент можно использовать в других компонентах без необходимости его объявления в каком-либо модуле. Например, добавим его в главный компонент приложения AppComponent

import { Component } from '@angular/core';
import { StandaloneExampleComponent } from './standalone-example/standalone-example.component';

@Component({
selector: 'app-root',
template: `<app-standalone-example></app-standalone-example>`,
standalone: true,
imports: [StandaloneExampleComponent]
})
export class AppComponent {
// Логика главного компонента
}

Шаг 4: Импорт необходимых модулей

Если ваш Standalone компонент использует директивы или другие Angular модули (например, FormsModule), их нужно явно импортировать в декораторе компонента:

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';

@Component({
selector: 'app-standalone-example',
templateUrl: './standalone-example.component.html',
styleUrls: ['./standalone-example.component.css'],
standalone: true,
imports: [FormsModule]
})
export class StandaloneExampleComponent {
// Логика компонента
}

Что будет, если указать standalone: false

Если указать standalone: false (или не указывать этот параметр вовсе, так как по умолчанию он false), компонент будет считаться зависимым от модуля. Это значит, что для его использования в приложении, его нужно будет объявить в declarations соответствующего модуля. В общем тоже самое что и в традиционном варианте.

Easy

Как видите Standalone component всего лишь отличается тем что мы добавили в него параметр
standalone: true и imports: [ ] в который можно импортировать другие модули для собственного использование.Так же стоит заметить компонент автоматически экспортирует себя же. Если мы хотим использовать standalone компонент в другом компоненте то он должен быть импортирован в модуль этого компонента а не задекларирован- это очень важно.

Миграция

Еще одна тема которую мы не затронули это миграция существующего приложения с модульной архитектурой на автономную. Но тема это на столько обширная что я просто оставлю тут ссылку на ru доку в которой все подробно описано. Если вкратце то там так же нет не чего сложного - просто выносите SharedModule и CommonModule и в место него все импортируете на прямую в компонент в котором это требуется. Есть нюансы с ленивой загрузкой но там тоже не чего сложного, нужно просто переименовать метод. Вообще смысл всей миграции сводится к тому чтобы что-то переименовать-удалить-заменить. Математиком тут быть не надо)

Заключение

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

Если вы только начинаете работать с Angular или уже опытный разработчик, Standalone компоненты могут значительно упростить вашу работу и улучшить структуру ваших приложений.

Вот такие пироги!