Mitä ovat standalone-komponentit?

Question

Accepted Answer

**Standalone-komponentit** (Angular 14+, oletusarvo uudemmissa versioissa) antavat komponentin ilmoittaa **omat riippuvuutensa suoraan**, ilman että sen tarvitsee kuulua `NgModule`-iin. Ne vähentävät dramatisesti boilerplate-koodia ja ovat nyt suositeltu tapa Angular-sovellusten rakentamiseen. ## Standalone-komponentti ```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 = []; } ``` Komponentti tuo sisään juuri sen, mitä sen template käyttää (`CommonModule` `*ngFor`-ille, `RouterLink` linkeille) — sen riippuvuudet ovat eksplisiittisiä ja samalla paikalla, sen sijaan että ne ilmoitettaisiin erillisessä NgModule-issa. ## Kontrasti NgModule-iin ```text NgModule approach: Standalone approach: ────────────────────────────────────────────────────────────── @NgModule({ declarations:[Comp], @Component({ standalone: true, imports:[CommonModule] }) imports:[CommonModule], ... }) → extra file, indirection → everything in one place ``` ## Standalone-sovelluksen käynnistäminen (ilman AppModule-ia) ```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-sovellukset korvaavat juuri `AppModule`-in `bootstrapApplication`-funktiolla ja **`provideX`**-funktioilla — puhtaampi, funktioihin perustuva konfiguraatio. ## Edut ```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 ``` ## Miksi sillä on merkitystä Standalone-komponentit ovat **Angular-kehyksen moderni suunta** — kehys nyt rakentaa standalone-komponentit oletuksena ja tarjoaa `provideX`-funktioita ominaisuuksien konfigurointiin ilman moduuleja. Ne poistavat pitkäaikaisen NgModule-ylikuormituksen, tekevät riippuvuuksista eksplisiittisiä ja paikallisia, ja yksinkertaistavat lazy-lataamista ja yleistä ajattelumallia. Standalone-komponenttien (ja `bootstrapApplication`/`provideRouter`/`provideHttpClient`-asetuksen) ymmärtäminen on olennaista nykyaikaisen Angular-kehityksen kannalta, vaikka NgModule-tietämys on edelleen tarpeen perintökoodeille.