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

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

Siksi Angular-tiimi alkoi ajan myötä yksinkertaistaa rakennetta. Tämä johti uuden lähestymistavan käyttöönottoon — Standalone-komponentit.

Mikä on Standalone-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 luettelo 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 täytyy määritellä suoraan komponentissa — ja Angular toimii tällöin sisäisesti moduulina kyseiselle komponentille.

Miksi Angular siirtyy pois NgModuleista?

NgModules olivat tärkeitä suurissa sovelluksissa:

• Ne auttoivat koodin organisoinnissa;

• Ne tarjosivat hallinnan näkyvyyteen (scopeen);

• Ne olivat hyödyllisiä optimoinnissa.

Ajan myötä on kuitenkin käynyt selväksi, 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.