Что такое standalone компоненты?angular-82

Основная концепция

Standalone компоненты — это компоненты, которые могут существовать без необходимости объявления в NgModule, введенные в Angular 14 как часть постепенного отказа от NgModule-системы. Они представляют собой более простой и современный способ организации Angular-приложений.

Ключевые характеристики

1. Независимость от NgModule

Standalone компоненты:

  • Не требуют объявления в declarations массиве NgModule
  • Могут импортировать зависимости напрямую
  • Могут быть загружены лениво без NgModule

2. Собственные импорты

Компонент сам определяет свои зависимости:

@Component({
  standalone: true,
  imports: [CommonModule, ReactiveFormsModule, SomeOtherComponent],
  template: `...`
})
export class MyStandaloneComponent {}

3. Самостоятельная загрузка

Могут быть:

  • Корневым компонентом приложения
  • Загружены через маршрутизатор
  • Динамически отрендерены

Как создать standalone компонент?

Базовый пример

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

@Component({
  selector: 'app-standalone',
  standalone: true,
  imports: [CommonModule],
  template: `
    <h1>Я независимый компонент!</h1>
    <p>Мне не нужен NgModule</p>
  `
})
export class StandaloneComponent {}

Использование в маршрутизации

const routes: Routes = [{
  path: 'standalone-path',
  component: StandaloneComponent
}];

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

  1. Упрощенная архитектура:

    • Меньше шаблонного кода
    • Нет необходимости создавать NgModule для каждого компонента

  2. Лучшая инкапсуляция:

    • Компонент явно объявляет свои зависимости
    • Четкие границы ответственности

  3. Улучшенная производительность:

    • Более эффективное tree-shaking
    • Меньший размер бандла

  4. Гибкость разработки:

    • Проще реиспользовать компоненты
    • Удобнее работать с микросервисной архитектурой

Миграция с обычных компонентов

  1. Добавить standalone: true
  2. Перенести зависимости из NgModule в imports компонента
  3. Обновить маршруты (если используется роутинг)

Пример миграции сервиса:

@Component({
  standalone: true,
  imports: [HttpClientModule], // Раньше импортировалось в NgModule
  providers: [MyService] // Сервисы можно регистрировать на уровне компонента
})
export class MigratedComponent {}

Ограничения и особенности

  1. Совместимость:

    • Можно использовать вместе с NgModule
    • Standalone компоненты могут зависеть от обычных (через imports)

  2. DI-иерархия:

    • Провайдеры регистрируются в компоненте или его инжекторе
    • Нет доступа к провайдерам "родительского" NgModule

  3. Роутинг:

    • Для lazy loading теперь можно использовать loadComponent
    { path: 'lazy', loadComponent: () => import('./lazy.component')}

Практические примеры использования

1. Библиотека UI-компонентов

@Component({
  standalone: true,
  imports: [CommonModule, MatButtonModule],
  selector: 'lib-button',
  template: `<button mat-button><ng-content></ng-content></button>`
})
export class StandaloneButton {}

2. Микрофронтенды

// Главное приложение
{
  path: 'micro-app',
  loadComponent: () => import('micro-app/StandaloneComponent')
}

3. Динамические формы

@Component({
  standalone: true,
  imports: [ReactiveFormsModule, DynamicFieldComponent],
  template: `
    <form [formGroup]="form">
      <ng-container *ngFor="let field of fields">
        <app-dynamic-field [field]="field"></app-dynamic-field>
      </ng-container>
    </form>
  `
})
export class DynamicFormComponent {}

Резюмируем

  • Standalone компоненты — современная альтернатива NgModule
  • Упрощают архитектуру приложения и уменьшают шаблонный код
  • Позволяют более точно управлять зависимостями
  • Особенно полезны для UI-библиотек и микрофронтендов
  • Полностью совместимы с существующей NgModule-архитектурой
  • Стандарт для новых Angular-приложений (начиная с Angular 15+)

Вопросы

Собеседования