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 det hele 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 du opbevarer alt, der relaterer sig til en bestemt funktion. For eksempel kan alt brugerrelateret samles i et UserModule.

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

Her er, hvad de enkelte dele 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 (for eksempel 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 appen starter (typisk AppComponent).

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

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 dig mulighed for at oprette og bruge 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 angivet i nogen NgModule under declarations. I stedet tilføjer du alt, hvad den har brug for (såsom direktiver, pipes eller andre moduler) direkte via imports-egenskaben inde i selve komponenten.

Dette gør din projekts 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-rammer anvender stadig modulbaseret tilgang.