DATEV Nine-Nine | Halloween Heist 2022: Angular Standalone Components
By: Matthias Alt vs. Evil Deeds, Spookable Stephan Boowirth & Gerrit Ghost Reaper Riesch
Intro
In scary movies it’s never a good idea for the protagonists to get separated: As soon as they stand alone, bad things start to happen… Is it the same horror story with standalone components in our Angular-Applications? We will show you how to use them — if you dare!
Standalone Components — good or evil?
Standalone Components came creeping in from the crypts of Angular 14 and now we need to find out whether they are evil or good. We think it’s another case of “it depends” and that they are an amazing addition to the angular toolbelt. To put it in a nutshell they are a way to omit the well-known Angular Module system and therefore to simplify the developer experience by reducing complexity. Especially for shared and reusable components it can become frustrating to bundle them into one big module. Before they were officially included in Angular, developers therefore emulated this by using the SCAM (Single Component Angular Module) Pattern to have a dedicated module for a single component. Now we can just use the standalone feature and have components import just the dependencies they need. This works also for pipes and directives naturally. Altogether it’s a great way to de-couple, declutter and help beginners start with angular.
A component standing alone in the dark
So how does this look in code? It’s rather easy to declare a component standalone and omit the module. First you have to add standalone: true to your Component. After that you no longer need to declare the component in a NgModule — you’re actually not even allowed to → there will be an error if you try. Next you have to import all other standalone components, modules and/or dependencies (e.g., Angular Material Modules) that your component uses. In our example below you can see that it does not look that different to a “normal” Angular component. So far pretty easy, wouldn’t you say? :)
But what if you want to keep your existing module-based app structure but still use some standalone components? Well, that’s also super simple: You just have to import your standalone components into the module that uses them.
An app with only standalone components
If your application is using only standalone components, you can even get rid of the App Module. All you have to do is adapt the way bootstrapping is handled in the main.ts file. There is actually a new method called bootstrapApplication() to bootstrap a standalone component instead of the App Module. In most cases this will be your App Component. You can also add providers at this point.
Components in the Darkwoods
One of the scariest things that can happen to you when you are separated from the rest of your group, is to lose track of where you are and where you have to go. In order to keep our standalone components together and only load them, when they are needed (if a poor soul is coming into our woods), we can use a simple solution for Routing & LazyLoading.
We don’t need a router-module any longer for this, we just have to export the routes we need — and if our components should be as lazy as the common horror-film protagonist we can also achieve this with LazyLoading.
First, we have to define the routes for our standalone component and export them with a meaningful name.
In the next step we import these routes into our main-routes.ts.
Now whenever some unlucky soul wanders towards the darkwoods our standalone components ScaryTreeComponent & SpookyUnderwoodComponent will be lazy loaded.
That means only if the poor guy is taking the path into the spooky underwood, the related component will be loaded.
Final thoughts
Standalone Components… After years of using Angular Modules, it might sound scary at first but as we showed you it’s nothing to be afraid of. It can actually declutter the spider web of shared mega modules and make your app even more boo-tiful! Especially Angular newcomers will enjoy the reduced mental complexity. All dependencies are now located in the component and can be easily reasoned about. And the best part is that you can integrate standalone components into your app without breaking changes and without omitting your existing NgModules. So as mentioned earlier it’s not a case of good or evil but a case of the right tool for the job: For beginners, simple apps and for shared and reusable components it’s definitely a good choice to have a look at the new standalone components. The only thing left to say is: Creep it real and have a happy Halloween! 🎃
We hope you enjoyed our spooky story, and we would love to scare you next time!
Your three DATEV Nine-Nine ghostbusters,
Matthias Alt vs. Evil Deeds (LinkedIn)
