Standalone-komponenter (Angular 14+, standard i nyere versjoner) lar en komponent deklarere sine egne avhengigheter direkte, uten å måtte tilhøre en NgModule. De reduserer boilerplate dramatisk og er nå den anbefalte måten å bygge Angular-apper på.
{ } ;
{ } ;
{ } ;
({
: ,
: ,
: [, ],
: ,
})
{
users = [];
}
Komponenten importerer nøyaktig det som malen bruker (CommonModule for *ngFor, RouterLink for lenker) — avhengighetene er eksplisitte og samlokalisert, i stedet for å bli deklarert i en separat NgModule.
NgModule approach: Standalone approach:
──────────────────────────────────────────────────────────────
@NgModule({ declarations:[Comp], @Component({ standalone: true,
imports:[CommonModule] }) imports:[CommonModule], ... })
→ extra file, indirection → everything in one place
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-apper erstatter root AppModule med bootstrapApplication og provideX funksjoner — en renere, funksjonsbasert konfigurasjon.
✓ 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-komponenter er den moderne retningen til Angular — rammeverket scaffolder nå standalone som standard og gir provideX funksjoner for å konfigurere funksjoner uten moduler.
De fjerner den langvarige NgModule-overhead, gjør avhengigheter eksplisitte og lokale, og forenkler lazy loading og den generelle mentale modellen.
Å forstå standalone (og bootstrapApplication/provideRouter/provideHttpClient setupen) er essensielt for å arbeide med moderne Angular, mens NgModule-kunnskap fortsatt er nødvendig for eldre kode.