Što su samostalne komponente?

Question

IT Interview Practice · Accepted Answer

**Samostalne komponente** (Angular 14+, zadana vrijednost u novijim verzijama) omogućavaju komponenti da **direktno deklarira svoje vlastite zavisnosti**, bez potrebe da pripada `NgModule`. Dramatično smanjuju standardne kodove i sada su preporučeni način za izgradnju Angular aplikacija. ## Samostalna komponenta ```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 = []; } ``` Komponenta importira točno ono što koristi njena template (`CommonModule` za `*ngFor`, `RouterLink` za linkove) — njezine zavisnosti su eksplicitne i susmještene, umjesto da budu deklarisane u posebnom NgModule. ## Kontrast s NgModule-ima ```text NgModule approach: Standalone approach: ────────────────────────────────────────────────────────────── @NgModule({ declarations:[Comp], @Component({ standalone: true, imports:[CommonModule] }) imports:[CommonModule], ... }) → extra file, indirection → everything in one place ``` ## Pokretanje samostalne aplikacije (bez 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 ], }); ``` Samostalne aplikacije zamjenjuju root `AppModule` s `bootstrapApplication` i **`provideX`** funkcijama — čišća, funkcijsku konfiguraciju. ## Prednosti ```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 ``` ## Zašto je to važno Samostalne komponente su **moderni smjer Angular-a** — framework sada zadano kreira samostalne komponente i pruža `provideX` funkcije za konfiguriranje značajki bez modula. One uklanjaju dugotrajan NgModule overhead, čine zavisnosti eksplicitnim i lokalnim, i pojednostavljuju lazy loading i ukupan mentalni model. Razumijevanje samostalnih komponenti (i `bootstrapApplication`/`provideRouter`/`provideHttpClient` postavke) je neophodno za rad u trenutnom Angular-u, dok je znanje o NgModule-ima i dalje potrebno za stariji kod.

Samostalna komponenta

Kontrast s NgModule-ima

Pokretanje samostalne aplikacije (bez AppModule)

Prednosti

Zašto je to važno

Povezana pitanja