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

Question

Accepted Answer

**Standalone-компоненты** (Angular 14+, по умолчанию в более новых версиях) позволяют компоненту **напрямую объявлять свои собственные зависимости**, без необходимости принадлежать `NgModule`. Они резко сокращают стандартный код и являются теперь рекомендуемым способом построения приложений Angular. ## Standalone-компонент ```ts import { Component } from "@angular/core"; import { CommonModule } from "@angular/common"; import { RouterLink } from "@angular/router"; @Component({ selector: "app-user-list", standalone: true, // ← no NgModule needed imports: [CommonModule, RouterLink], // ← declare dependencies HERE, on the component template: ` {{ u.name }} `, }) export class UserListComponent { users = []; } ``` Компонент импортирует ровно то, что использует его шаблон (`CommonModule` для `*ngFor`, `RouterLink` для ссылок) — его зависимости явны и помещены вместе, а не объявлены в отдельном `NgModule`. ## Контраст с NgModules ```text NgModule approach: Standalone approach: ────────────────────────────────────────────────────────────── @NgModule({ declarations:[Comp], @Component({ standalone: true, imports:[CommonModule] }) imports:[CommonModule], ... }) → extra file, indirection → everything in one place ``` ## Загрузка standalone-приложения (без AppModule) ```ts import { bootstrapApplication } from "@angular/platform-browser"; import { provideRouter } from "@angular/router"; import { provideHttpClient } from "@angular/common/http"; bootstrapApplication(AppComponent, { providers: [ provideRouter(routes), // configure router functionally provideHttpClient(), // HttpClient without HttpClientModule ], }); ``` Standalone-приложения заменяют корневой `AppModule` функциями `bootstrapApplication` и **`provideX`** — более чистой, функциональной конфигурацией. ## Преимущества ```text ✓ Less boilerplate — no NgModule files to maintain ✓ Explicit dependencies — see exactly what a component uses ✓ Easier lazy loading — loadComponent() directly ✓ Simpler mental model — components are self-contained units ✓ Better tree-shaking potential ``` ## Почему это важно Standalone-компоненты — это **современное направление развития Angular** — фреймворк теперь создаёт код standalone по умолчанию и предоставляет функции `provideX` для конфигурации функций без модулей. Они устраняют давнюю сложность NgModule, делают зависимости явными и локализованными, и упрощают ленивую загрузку и общую модель мышления. Понимание standalone (и конфигурации `bootstrapApplication`/`provideRouter`/`provideHttpClient`) необходимо для работы с современным Angular, в то время как знание NgModule по-прежнему требуется для работы с унаследованным кодом.