Standalone Components: Simplifying Angular

When Angular 14 was released, there was an announcement that Angular was going to become more streamlined by removing the need for Modules. They called it their Standalone API. It’s basically a tag in the decorator of your Component, Directive, or Pipe that removes the need to declare it as part of a Module.

Angular in the world of Modules

I think it’s important to understand how Angular apps worked before Standalone Components. So we’re going to talk about Angular and Modules briefly.

If you’re unfamiliar with Angular, it’s a modular framework for building front-end web applications. It’s created of modular building blocks called Modules. Modules are containers for a cohesive block of code. What does that mean? If we look at it in terms of an actual application, a Module would contain all the necessary code to make one small part of your application work.

Think about a web app like Twitter. If it were built in Angular, there would be a tweet Module.

That Module would contain a tweet Component that displays the tweet. It might also have a toolbar Component that displays all the buttons at the bottom of the tweet. A custom Directive might take your tweet and look for links that it can display nicely.

There would be many different working parts of the Module that make this tweet function. All of these things would be contained inside one Module. The Twitter app might comprise hundreds of different modules that you can then put together like building blocks to develop something like Twitter.

Angular Post Modules

I mentioned already that the Standalone API removes the need for Modules altogether. One of the cool things about the Angular team is their commitment to backward compatibility. You can use the Standalone API at the same time as standard Modules.

The Standalone API allows you to add imports directly to your Component, Pipe, or Directive. It also allows them to be added to the imports of other Standalone Components or Modules.

Let’s think about the previous tweet example. How would it fundamentally be different if we used the Standalone API instead?

Contrasting the Module model and the Standalone model.

Here’s a simple representation of what it might look like. Rather than having all these different elements of a tweet contained within a Module, with the Standalone API, they’re not contained by anything. At first glance, that may seem like it might make things more confusing. Rather than having these well-defined blocks, we have a bunch of Standalone components just hanging out in our app.

However, this makes our app much easier to use and reuse. Let’s think about the Tweet Link Directive. What if we want to use that somewhere else in our app? If we were using the Module model, then we would have to import the whole Tweet Module. This would also include many things we don’t really need, like the Tweet Toolbar Component.

However, we could import the Directive we need with the Standalone API and nothing more. This actually makes re-using Components, Pipes, and Directives a lot more efficient.

Current Limitations of the Standalone API

When Angular 15 was released, they announced that the Standalone API had graduated from developer preview and into the sound library. With that, they also announced that you could create a whole Standalone Application. This removes the use of Modules altogether and bootstraps your app Component directly in your main.ts file. While this is really cool, there are still some limitations to it.

Angular Universal

If you use a Standalone Application, you can’t automatically bootstrap an Angular Universal application. There is a GitHub issue to track this:

There is a hacky way around it, but I couldn’t really get it to work well. While I love Angular, and I think the new Standalone API is great, this issue is annoying and should have been thought out a bit more. If this were still in developer preview, I think it would be fine, but since it’s now considered stable, I’m a little more critical of it.

Overall, It’s Pretty Good

I’ve been using the Standalone API since it was released. I think that it’s really helped out the Angular ecosystem in general. I can’t wait for the support for Standalone APIs to become a little better. I would strongly encourage you to check out Standalone Components!