Τι είναι τα standalone components;

Question

Accepted Answer

**Τα standalone components** (Angular 14+, προεπιλεγμένα στις νεότερες εκδόσεις) επιτρέπουν σε ένα component να δηλώσει **τις δικές του εξαρτήσεις άμεσα**, χωρίς να χρειάζεται να ανήκει σε ένα `NgModule`. Μειώνουν δραματικά το boilerplate και είναι πλέον ο συνιστώμενος τρόπος δημιουργίας εφαρμογών Angular. ## Ένα standalone component ```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 = []; } ``` Το component εισάγει ακριβώς αυτό που χρησιμοποιεί το template του (`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 ``` ## Bootstrapping μιας 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 εφαρμογές αντικαθιστούν το root `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 components είναι η **σύγχρονη κατεύθυνση του Angular** — το framework τώρα δημιουργεί scaffolds standalone από προεπιλογή και παρέχει συναρτήσεις `provideX` για τη διαμόρφωση χαρακτηριστικών χωρίς modules. Αφαιρούν το μακρόχρονο overhead του NgModule, κάνουν τις εξαρτήσεις ξεκάθαρες και τοπικές, και απλοποιούν το lazy loading και το συνολικό νοητικό μοντέλο. Η κατανόηση του standalone (και της ρύθμισης `bootstrapApplication`/`provideRouter`/`provideHttpClient`) είναι απαραίτητη για την εργασία στο σύγχρονο Angular, ενώ η γνώση του NgModule παραμένει απαραίτητη για κληρονομιά κώδικα.