Standalone components in Angular. Should I use them?

The angular team introduced a new feature in version 14. It’s called Standalone Components, which is nothing more than a simple component without declaring it in any module. For now, you can even create the whole application without creating a single ngModule in it. What’s so good about this feature? Why should we use it? And what should we do in the existing project? Keep on reading!

What is a Standalone Component and how can we declare it?

Standalone Components are simply Angular components that need to be configured with the option ‘standalone’. For me, it looks more like React component, which doesn’t need any dependency but can import other components without configuring it in the Angular module. According to the Angular team, this feature will bring learning curve less steep simply because people don’t need to deal with modules, dependencies between them and hence more code to write. What’s more, they made it clear that Standalone Components shouldn’t have any negative impact on performance and built-time. In fact, such components are expected to shorten the build time.

You can declare standalone components like this:

Angular cli command: ng g c test –standalone

What if you try to import it into some ngModule? No worries. The angular compiler will throw an error as shown below:

Such components are self-contained, independent and tree-shakable. It means that they are less error-prone. Even better, they result in smaller application bundles, especially if used in shared dependencies and published libraries.

Are there any limitations?

I can’t see any. You can lazy load such components, still use existing modules in it, or dynamically create them straight into DOM. You can also mix them with existing components which are declared on an older approach. It’s simple as that.

Lazy loading:

Using existing modules:

I also think that it’s a great way to easily keep the approach of dumb components (components that only display data and have no hidden logic in them) which might be declared in a single file like this:

What to do in existing module-based projects?

In existing module-based projects, there are three options.

1. Use new Standalone Components and allow them to live together with module-based.
2. Spend time migrating from module-based components to standalone (definitely easier in projects based on SCAM-principle where for every component you create a separate module. Otherwise, it can take too much time).
3. Keep a module-based approach if your project is strongly based on it and there are reasons not to change this approach.

I strongly recommend choosing the first option. You can create new features based on Standalone Components and refactor existing module-based when you will change something in them. Over time there should be fewer and fewer of them.

Conclusion

As you see, the Standalone Components feature is really simple, and it doesn’t provide any limitations, which is the perfect situation for learning it and using it in new projects. What’s more, it allows writing less code and keeps the project even simpler, so the benefits are real! They can also be the gate to the module-free Angular world, but we shouldn’t be so optimistic about it because modules are likely to still be with us but more like an option. Anyway, it’s worth believing that such a day can come.

‍

Wojciech Jakubek