Angular standalone components

Components, standalone Angular. import Order of matter.

Let me start it this way. The idea behind Angular modules was ok. The idea behind modules came from the back end where each feature or logical piece of the app is in a module that is used in the controller etc. But the reality of Front End is a little bit different. With standalone components and typed forms Angular is getting to its adult, mature age.

How does the module architecture work?

Our main architecture was built in a way that we had Main Module which serves as a bootstrap for the application itself, then we had a bunch of lazy-loaded feature modules and each feature module had its component bound to its child router(which wasn’t lazy-loaded until the time that the module became big and we started to refactor it to a bunch of smaller sub-modules with components, etc…)

On top of that, we had a shared module -> which imported the most used functionality, validations, pipes, and directives, and then it was imported into our feature modules -> basically we imported 80% of unnecessary logic even when some directives and pipes had their module.

Very quickly designed chart, hopefully it makes sense

What is the issue?

Well, the issue with this kind of architecture is when you want to start doing some optimizations: Imagine you want to have even those components being lazy loaded -> it means you would need to create for each component a separate module.

Imagine you want to have only one specific not-so-important directive or pipe being loaded -> again you would need to create a module for that pipe to import in your small submodule for your component.

Also, Imagine a situation in that you want to create from your feature module a shared module to be reused in another part of your app (for example a calendar) -> that would mean that you would need to do a refactor, move your calendar in a shared, update your module’s dependencies, etc…

See the difference?

Can you spot the difference?

Standalone architecture provides us naturally with:

1. Better or natural granularity
2. Straightforward lazy loading
3. Easier shareability
4. Enforce you to write better code
5. Faster app
6. Exportability of your components

In conclusion, in that article, we saw the main differences between modular and standalone architecture. Thanks to the Angular team it is quite easy to refactor from modular to standalone architecture. Before starting working on your standalone architecture, read the official documentation https://angular.io/guide/standalone-components and don’t forget about angular architecture best practices: https://medium.com/@marekpanti/angular-architecture-structure-1ed97fd3652e

If you like my article, please subscribe and wait for news about Angular :)