Aiemmissa Angular-versioissa jokaisen komponentin tuli kuulua moduuliin. Jopa yksinkertaisinta komponenttia ei voinut käyttää itsenäisesti — se piti määritellä NgModule-moduulin sisällä.

Tämä oli kuin tarvitsisi kokonaisen keittiön vain kupillisen teetä varten. Kuulostaa raskaalta, eikö?

Tämän vuoksi Angular-tiimi alkoi ajan myötä yksinkertaistaa rakennetta. Tämä johti uuden lähestymistavan käyttöönottoon — itsenäiset komponentit.

Mikä on itsenäinen komponentti?

Luo tällainen komponentti lisäämällä standalone: true -asetus @Component-koristelijaan ja määrittelemällä tarvittavat riippuvuudet imports-taulukossa:

Tässä standalone: true on erityinen asetus @Component-koristelijassa, joka ilmoittaa Angularille, että tämä komponentti on itsenäinen — sitä ei tarvitse määritellä NgModuleen.

Lisäksi määritellään lista ulkoisista riippuvuuksista (imports), joita komponentti tarvitsee. Perinteisessä moduulipohjaisessa lähestymistavassa nämä riippuvuudet lisättiin moduulin imports-taulukkoon. Kun komponentit toimivat ilman moduulia, niiden riippuvuudet on ilmoitettava suoraan komponentissa — ja Angular toimii tällöin sisäisesti moduulina kyseiselle komponentille.

Miksi Angular siirtyy pois NgModuleista?

NgModules oli tärkeä rooli suurissa sovelluksissa:

• Ne auttoivat järjestämään koodia;

• Ne tarjosivat hallinnan näkyvyyteen (scopeen);

• Ne olivat hyödyllisiä optimoinnissa.

Ajan myötä on kuitenkin käynyt ilmi, että monet näistä asioista voidaan toteuttaa komponenttitasolla — yksinkertaisemmin ja intuitiivisemmin.

Toisin sanoen, standalone-komponentit ovat nykyaikainen tapa rakentaa komponentteja ilman moduleita. Ne yksinkertaistavat rakennetta, tekevät komponenteista itsenäisiä ja helpommin käytettäviä.

Angular tukee edelleen moduleita, mutta suosittelee standalone-komponenttien käyttöä uutta koodia kirjoitettaessa.