Forestil dig, at du bygger en app. I starten er det kun en enkelt fil — som main.ts. Men efterhånden tilføjer du mere: komponenter, services, styles, logik, datahåndtering, autentificering og så videre.

Før eller siden begynder det at blive rodet — det er svært at se, hvad der bruges hvor, eller hvordan alting hænger sammen.

Det er her, modularitet bliver din bedste ven.

Hvad er et modul i Angular?

Tænk på et modul som en boks, hvor alt relateret til en bestemt funktionalitet opbevares. For eksempel kan alt brugerrelateret samles i et UserModule.

I Angular er et modul blot en klasse markeret med @NgModule-dekorationen, som vist her:

Her er, hvad hver del gør:

• declarations – angiver de komponenter, direktiver og pipes, der tilhører dette modul;

• imports – importerer andre moduler, som dette modul er afhængigt af (som BrowserModule for DOM-adgang);

• providers – erklærer services (til dependency injection), der er tilgængelige i dette modul;

• bootstrap – definerer den hovedkomponent, der skal indlæses, når applikationen starter (typisk AppComponent).

Grundlæggende definerer et modul, hvilke afhængigheder det har, hvad det stiller til rådighed for andre moduler osv.

Alle komponenter, der interagerer med dette modul, kan benytte de services og andre ressourcer, det stiller til rådighed.

Hvorfor vi ikke bruger moduler lige nu

Fra og med Angular 14 findes der et nyt alternativ — standalone-komponenter.

Disse giver mulighed for at oprette og anvende en komponent uden at placere den i et modul overhovedet. Vi har faktisk brugt dem gennem hele vores projekt, og de ser sådan ud:

Dette er en standalone-komponent — hvilket betyder, at den ikke behøver at blive opført i nogen NgModule under declarations. I stedet tilføjes alt, hvad den har brug for (såsom direktiver, pipes eller andre moduler), direkte via imports-egenskaben i selve komponenten.

Dette gør projektets struktur lettere og mere fleksibel — særligt nyttigt for små apps eller isolerede funktionsblokke.

Selvom nyere Angular-projekter ikke kræver moduler, vil du stadig ofte støde på dem:

• Ældre virksomhedsapps er udelukkende bygget med moduler;

• Mange vejledninger, dokumentationer og eksempler er stadig skrevet med NgModule;

• Nogle tredjepartsbiblioteker og UI-rammeværk anvender stadig modulbaseret tilgang.