The Little-known Story Behind Angular Standalone Components

lorenzojkrl

Lorenzo Zarantonello

Posted on September 21, 2022

The Little-known Story Behind Angular Standalone Components

While trying out Angular Standalone Components (SC), I asked myself why the Angular team introduced this feature.

The official documentation declares:

In v14 and higher, standalone components provide a simplified way to build Angular applications. Standalone components, directives, and pipes aim to streamline the authoring experience by reducing the need for NgModules.

So, in a word, simplification.

So far, so good! Or not?

I'll skip the part where I used a standalone component because you can find tons of "how-to" online.

But if you are interested, you can find it on this free Medium article. And since you are there follow me or forget me:)

Why Do We Need Angular Standalone Components?

The simple example above represents a common scenario, in my opinion.

So, I don’t buy the answer “simplification.”

Standalone Components might simplify your app when creating it from scratch but not when we work on existing apps.

I thought there must be more to this, and here is the story.

1. The Original Sin

deadline in 2016

It all began with a deadline!

The deadline dates back to the release of Angular 2, in 2016.

As often happens with deadlines, they tend to be far in the beginning and very close after a blink.

I’ve learned over decades of building that a deadline is a potent tool for problem-solving.

Adam Savage

In the summer of 2016, Angular 2 was supposed to be ready to be released, but the ahead-of-time (AOT) compiler was not.

As you can imagine, this is not trivial because Angular apps need to be compiled before they can run in a browser.

The AOT compiler converts the Angular app into JavaScript code during the build phase so browsers can download and render the app faster.

On top of this, many developers complained about the release candidate of Angular.

It simply didn’t work well!

And there were two main problems:

  1. Publishing Angular libraries via npm was faulty. Libraries would behave erratically and create bugs. This makes it next to impossible to build a strong and healthy ecosystem! Furthermore, the issue surfaced only in the summer of 2016!
  2. Specifying fine-grained dependencies was often leading to errors. Developers would find their way around it by creating arrays of dependencies that would get imported everywhere. Out of pressure and necessity, NgModule was born!

The design of NgModule was probably a patch that tried to target all the issues above.

While it allowed delivering Angular 2, it created a series of externalities and complications:

  • Getting started with Angular became less smooth
  • Designing the compiler became more complex

By the end of the same year, Igor Minar, who was working on the project, declared his hopes to make NgModules optional, at some point.

2. Road To Redemption

roadmap to standalone

After two years, during the winter of 2018, Minko Gechev proposed to make NgModules optional.

The proposal was based on Ivy, which was on its way to becoming Angular’s new compilation and rendering pipeline.

Ivy was on its way but not quite there yet!

If you start to sense some scope creep, you aren’t the only one!

Since Ivy became quite a big project on its own, the Angular team decided to park the proposal to make NgModules optional.

In February 2020, Ivy became available to us mortals, and the Angular team, which is particularly prolific in the cold months, resurrected the dream of optional NgModules.

Enter Mark Thompson, the party crasher.

As Circe with Odysseus and his crew, Mark Thompson lures the Angular team into Operation Byelog, in an effort that will last a year. Ok, maybe the culprit is Angular’s Roadmap and Mark Thompson has no faults. Sorry!

But anyway, the team focused on a new endeavor.

Operation Byelog consisted in focusing engineers on triaging issues and PRs to tackle the broader community needs.

While the Angular community was grateful for this effort, the dream of optional NgModules was fading.

It took until May 2021 for someone to speak about NgModules again.

While @pkozlowski_os kicked off the discussion, the navigation wasn’t smooth. People jumped in and out of the boat due to other priorities.

3. The North Star

Luckily, the expert sailor Alex Rickabaugh showed the way by creating a spike based on Minko Gechev’s original PR.

In August 2021, Alex Rickabaugh presented the spike at Angular Nation.

The presentation was followed by intense discussions that lasted for months until “the “virtual” NgModule design gained consensus and support by the team, customer, and GDE; and was turned into the RFC”.

If you stayed with me until now, I hope you didn’t forget the original question!

Why Do We Need Standalone Components?

It seems using NgModules was never intended to be the standard way of building Angular applications!

💖 💪 🙅 🚩
lorenzojkrl
Lorenzo Zarantonello

Posted on September 21, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related