The new year has just began and I couldn't be more excited about the latest and also upcoming developments in the area of frontend development, which is moving faster than ever. While new & cool frameworks like Nextjs, Remix or Astro (to just name a few of them) increase their poupularity and adoption, you might ask yourself, which role the dinsosaur Angular will play in this game. What can we expect from Google's SPA Framework?

Recap of 2021

Before we start to talk about expected features, let us recap, how Angular developed over the last year.

Stats

Here are some stats for you:

• The weekly download count increased from around ~2,2 mn downloads to ~2,8mn downloads per week (source: npm-stat.com)
• The total downloads per year increased from ~89mn in 2020 to ~134mn in 2021 (source: npm-stat.com)
• The Angular Github Repository was starred 9,3k times in addition (source: risingstars)
• In total the repository has 78k stars, it is used by more than 2,1 mn public projects, it has more than 20k forks and more than 1,5k contributors (source: Github)

Even if one can question the validity of the individual points, in total they are a good indicator for the overall success of the framework.

Features & Changes

What were the major changes and improvements in the last year, respectively the two last major versions, v12 and v13?

To not blow up this article, I will only cover those aspects, I think are most important:

Ivy Everywhere

The idea of a new renderer called Ivy has been around for a while, if I remember correctly since 2019. The goal of the Angular team was as promising as it was ambitious: Better build times, smaller bundle sizes, better DX, less maintenance effort, enabling new features.

Even though Ivy is the default renderer for apps since version 9, the old renderer called View Engine has not been removed entirely until now. But the team invested a lot to make Ivy Everywhere happen. So it comes, that Angular Language Service is now Ivy based and also Angular packages are now distributed in a new Angular Package Format (APF). The new APF comes with ES2020 output format and partial Ivy compilation by default. This leads not only to a modernized format, but also to the fact that ngcc (Angular Compatibility Compiler) is no longer necessary to preprocess packages. This saves a good 1-2 minutes postinstall time!

Performance Improvements

With version 12, the Angular CLI made the switch from Webpack 4 to 5. Sadly this change caused a slight increase of build time compared to previous versions (GitHub Issue). However, the CLI team is always on the move and tries to constantly improve their product. Thats why they integrated the Persistent Build Cache as Opt-In in versions 12 and enabled it by default in version 13 (RFC). Depending on the application, build time improvements of up to 68% are possible 🎉.

Furthermore they integrated the next-generation build tool esbuild into the build pipeline. It is used to optimize global scripts and css, which results in faster builds and better build optimizations.

Other mentionable performance improvements are faster test execution through a enhanced TestBed Teardown strategy and also better core web vital scores through inlining of critical fonts and styles.

Others

Other remarkable changes were:

• Deprecation of IE 11 support (v12) and removal of IE 11 support (v13)
• Production builds by default
• Sass Support for inline-styles
• Tailwind support by Angular CLI - optimization and minification w/o further setup
• A11y improvements
• Release of official DevTools for Angular

Even though Angular was already a mature & comprehensive framework before, this list demonstrates clearly, that the Angular team is still capable to ship major features and improvements, which in turn help us to produce better software.

Outlook 2022

Now, as we know what the Angular team started last year, we can take a look at Angular's official Roadmap and if you ask me, the future of Angular shines bright.

Angular Forms

There is already a GitHub Issue since December 2016, which formulates the wish for strictly typed reactive forms in Angular. It is one of the most popular (comments and reactions) issues in the entire repository. Now, it is on the official roadmap and also under active development. The emitted target is to implement stricter typechecking and better editor support.

Although the forms received some love by the community in the previous versions (#1, #2), there is currently a RFC open, which discusses possible improvements, goals and the scope of the teams effort. You can still share your opinion on the topic until end of January until the RFC will be closed.

Optional NgModules

To simplify the Angular mental model and learning journey, we’ll be working on making NgModules optional. This work lets developers develop standalone components and implement an alternative API for declaring the component’s compilation scope.

This is one of the most awaited change in Angular since its beginning. Compared to other frontend frameworks and compilers, Angular comes with its own module system, whereas others bet on the JavaScript module system. The declaration of (Ng)Modules is just not necessary in other solutions. In October 21, the team started a RFC, where a first step towards a module free future is discussed. It is scoped to so called standalone components, directives and pipes. Those can declare their dependencies by their own, which makes the declaration of the NgModule obsolete.

Although, Angular won't remove NgModules any time soon, I am very confident, that the discussed changes of the RFC will be released either in version 14 or 15. Also - as Emma Twersky mentioned it in the tweet below - standalone components could come with a minor version, because it is designed as a non-breaking change.

While I personally think, that especially beginners will benefit from optional NgModules, you cannot deny the advantage of less files/code, you need to develop and maintain. If you gradually want to prepare your codebase for the change, I can recommend you to follow the Single Component Angular Module (SCAM) pattern. There is even a generator/schematic provided by Nx.

Micro Frontend Architecture

Webpack 5 introduced a Module Federation Plugin enabling multiple, independently built and deployed bundles of code to form a single application. nx.dev/guides/setup-mfe-with-angular#how-to..

A Micro Frontend Architecture is particulary important for scaling the development process in large teams and applications. The Angular team now wants to investigate how the development could be supported even better.

I personally do not expect bigger improvements in that regard, because the team only has the investigation on its radar, not yet any kind of implementation. The good thing is, that when you really have the need to develop micro frontends, then you should anyhow consider Nx as build tool. They not only provide a detailed guide for the mfe setup, but also support in their application generators.

Angular Material integrating MDC Web

Until now, Angular's component library Angular Material is developed independantly or rather decoupled from the Material Design System.

Using MDC Web aligns Angular Material more closely with the Material Design specification, expand accessibility, improve component quality, and improve our team's velocity.

The new components are already in the starting blocks as experimental release for a while, but Angular holds them back, until they are sure, that they won't break existing applications. You can try them out by using the @angular/material-experimental package. Read more about the setup here

As you can read from the tweet below, they plan to make mdc-components stable within this year. I do really hope so, because then the material team would finally have free capcity again for new components and improvements.

Angular DevTools integration with framework

In a first step, it is planned to move the codebase in Angular's monorepository, which also includes the integration into development processes as well as the bazel build pipeline.

Although I expect some minor features for the devtools itself, this will be more of a preparational task for the future.

Advanced Compiler Diagnostics

Here, the team plans to

extend the diagnostics of the Angular compiler outside type checking.

As a result, the developer experience and therefore the software quality could be improved further.

Performance Dashboard

This feature is kind of internal tooling, which should ensure runtime performance of the framework and should save it from performance related regressions introduced by code changes.

Zone.js opt-out

Personally I am really thrilled about this feature. It was already discussed since the early time of Ivy, which is seen as an enabler here. By making zone.js optional, Angular applications could reduce their bundle sizes significantly while providing even better runtime performance.

ngc as tsc plugin

The plan is to distribute the Angular compiler as a plugin of the Typescript compiler. This should speed up build performance and reduce maintenance costs.

I would be more than happy to see this feature in the early future, but I am sure that we won't see stable version within this year. Best I could imagine is, that it is released as a experimental feature with version 15.

Protractor replacement

Last year, there was an Issue discussing Protractor, its potential deprecation as well as potential successors. I am not sure, if we can expect bigger changes or even a replacement by the Angular Team. However, there are also lot of community builders out there. And again, if you like Cypress as E2E test tool, I can once again recommend you to use Nx, which comes with 1st class support for Cypress.

Next-gen build tools

2021 was the year of the next generation build tools, like esbuild, vite or swc. As we already noted, the Angular CLI already uses esbuild under the hood, but still not exclusively.

As Minko Gechev explains here, the Angular CLI will continue to adopt esbuild, while ensuring stability for existing applications. Furthermore the team does not plan to replace Webpack as build orchestration tool (for now).

Conclusion & Personal Opinion

I just summarized a lot from public sources and it feels like looking into the crystal ball to predict features. Personally, I think that most of the points, which are currently marked as work in progress will be released this year. As the Angular team also works in a agile way, it is more than unclear, what is coming afterwards. What I showed you, is Status-quo, but in the meantime a lot can change.

Here is my personal opinion on Angular's evolution in 2022: First of all, I am very happy about Angular's transparency, the regained closeness to community and the opportunity to influence the Framework's direction and piorization of features. I consider this positive and important.

2022 will be full of great new features and long awaited changes. Furthermore, with the removal of IE 11 support and View Engine, the Angular team layed the foundation for higher velocity and awesome innovations. That is the reason, why I think Angular will continue to grow in this year even though the competition is getting stronger.

The biggest advantage of Angular is in my opinion that it is a fully comprehensive framework where the focus is always on continuity and stability. This enables not only smooth updates and migrations to new versions, but also to let developers focus on their usecases.

Although there are other great frameworks evolving in the frontend world and you might have FOMO to not try and use them, Angular will remain a great choice for new and existing applicatons. I am looking forward that all the mentioned features will be shipped to production!

That's it from my site, what do you think? How will Angular compete against other Frameworks? Which features are you most excited about? I would be happy if you share your thoughts with me.

Thank you for reading and happy coding!