Everything You Need to Know About Angular’s Standalone
In-Depth Exploration: Angular’s Standalone Feature
Hi there 👋
Angular has undergone many significant changes lately, including signals, standalone, deferrable views, new built-in control flow, etc. This article is dedicated to one of these features: the standalone feature. It’s a must-know for every Angular developer, as it transforms the way we code and structure our application.
👀 Video version available at the end of this article.
🚀It started in Angular 14
The standalone feature was initially introduced in the developer preview of Angular 14. This feature marks a shift from a module-based app, where components must be declared in a module to be used, to a fully component-based app.
As of Angular 17, the Angular CLI schematics fully support the standalone feature, and it is now the default option (you don’t need to enable it with —standalone flag. With this feature, you can generate a complete standalone app, standalone pipe, component, directive, and even convert your code to standalone.
👀 Before vs. After
→ Life before the standalone feature
Let’s take, for example, a traditional scenario where I have dumb components in a shared module (SharedModule), and I want to use them in a feature module (ProductsModule).
To use CardComponent in the ProductsModule, I need to ensure that the SharedModule, where it is declared, also exports it. Afterward, I can import the SharedModule in the ProductsModule.
⚠️ Notice that I need only the CardComponent, but I ended up importing the whole SharedModule.
→ Life after the standalone feature
Now, let’s move on to life after the standalone feature. I can make these components standalone by adding the standalone property set to true and importing what they need to work correctly in their imports array property.
💡 Notice that I didn’t import the entire Angular CommonModule to be able to use ngIf and ngClass, because those directives have become standalone, allowing me to import them directly.
With the standalone feature the component is:
✔️Self-contained
✔️Doesn’t require declaration in any NgModule
✔️Can explicitly manage its dependencies
We can import them directly into a module or in a standalone component. You import only what you need; hence, you build your app in a tree-shakable way.
💡 Benefits
Here is what make standalone feature really interesting
- Less code and boilerplate: It reduces the amount of code and boilerplate, making your Angular development more concise and focused.
- Reduced framework complexity: The standalone feature simplifies the Angular learning journey by making it more natural and intuitive. Instead of dealing with the complexities of declaring components in a module and exporting/importing them, you can now simply import what you need.
- Fine-grained lazy loading: Unlike before, where we could only lazy load entire modules, now we can lazily load standalone components. This provides more flexibility and efficiency in loading only the components that are needed at a given time.
- Standalone can coexist with NgModules, and that’s especially beneficial for old/legacy apps.
⚙️How does it work?
Wondering how it works behind the scenes? Well, the magic lies in the virtual NgModule created around each standalone component. That’s why when importing a standalone component, we import it similar to how we import a module (in the imports array). We can't include them in the declarations array of any NgModule, as a standalone component is already declared in its virtual NgModule, and a component can only be declared in one NgModule.
⚠️ Limitation
One limitation of this feature, when compared to the previous approach, is that you cannot bootstrap multiple components as you could with the NgModule.
📹 VV
I hope it’s crystal clear, or at least clearer for you than before, after reading this article or watching the video 🙏
Find more details about Angular evolution in this article:
That’s it for today, see ya 🙋
If you’ve got any questions or feedback, just hit comment or reach out to me via LinkedIn — I’m all ears!
If you like my article, subscribe to get my latest ones. If you like to experience Medium yourself, consider supporting me and thousands of other writers by signing up for a membership. It only costs $5 per month, it supports us, writers, and you have the chance to make money with your writing as well. Of course, you can cancel the membership anytime. By signing up with this link, you’ll support me directly with a portion of your fee, it won’t cost you more. If you do so, thank you a million times!
Let’s get in touch on Medium, Linkedin, Facebook, Instagram, YouTube, or Twitter.
