Ng-News Special Summer Edition

This edition of ng-news is a summer special, recapping everything that happened in the Angular community from the tail end of July through the final days of August.

Angular Q&A Session July

During the July Angular Q&A, co-hosts Mark Thompson and Jeremy Elbourn welcomed Jessica Janiuk from the Angular team. The conversation spanned various subjects, with Jessica giving an update on the progress of Server-Side Rendering (SSR) and hydration efforts.

Approximately 37 minutes and 45 seconds in, Jeremy Elbourn hinted at a confidential initiative dubbed the "data story" for Signals. This initiative is likely tied to the creation of a new, possibly alternative, iteration of Angular’s HttpClient, which could eventually remove the need for RxJs.

Ryan Carniato: Derivations in Reactivity

Ryan Carniato’s Deep Dive into Reactivity
In a similar vein, Ryan Carniato—the mind behind SolidJS, a framework that has played a major role in boosting Signals’ popularity—has put out a three-installment series on dev.to titled “Derivations in Reactivity.” The articles take a close look at how reactivity works and where Signals fit into that picture.

The first installment covers the “push” and “pull” mechanisms and explores how their interplay is realized in Signals. Carniato points out that with derivations (i.e., computed values) in Angular, tasks are executed only once, unlike other methods that could lead to repeated runs.

Part two tackles the scheduling dilemma—whether to evaluate derivations eagerly or lazily—and the consequences for performance, particularly when it comes to garbage collection.

In the third and last portion, the focus shifts forward to what asynchronous Signals might bring. Today, if a Signal carries an async value, you must type it as undefined or the eventual type. Carniato, however, sees a future where frameworks handle this more smoothly, dealing with the undefined state until the value arrives. This might also hint at what’s next for the Signal/HttpClient combo that Jeremy brought up during the Q&A.

Superpower with Directives and Dependency Injection

Armen Vardanyan, the mind behind Modern Angular, has released an extensive piece on Angular Space—a free-membership platform where community members curate and review published content—examining directives and their synergy with dependency injection.

Far from being purely academic, Armen’s write-up, “Superpower with Directives and Dependency Injection,” starts with directive fundamentals and escalates into sophisticated territory, leveraging practical scenarios you’ll likely adopt in your projects.

Among the tools he showcases is a versatile password-strength evaluator that supports multiple algorithms, triggered simply by attaching a directive. Likewise, he demonstrates a click-away directive, designed to execute a callback whenever a user clicks outside a specified region, alongside a permission-based directive that blocks rendering when access isn’t granted. These concrete illustrations highlight the potency of Angular directives, turning the article into a key asset for developers aiming to bolster their apps.

Angular Vienna Meetup: Partytown, Code PushUp & more

Not long ago, the community gathered for the Angular Vienna meetup, featuring talks by a range of speakers, including Vojtech Mašek and Robert Maier-Silldorff.

The event’s standout moment was Matec Chalk’s presentation on Code PushUp—a tool for gauging frontend quality that parallels SonarQube yet is tailored to web apps. Out of the box, Code PushUp evaluates a project across four dimensions: ESLint, Code Coverage, Security, and Performance using Lighthouse. The core purpose is to assist developers in tracking down and reducing accumulated technical debt.

Julian Jandl also delivered a notable presentation, diving deep into Partytown. This utility relocates expensive scripts off the main thread onto a web worker, enabling them to execute in parallel without obstructing the application.

The standout feature of Partytown is that it sidesteps the usual limitations of a worker thread, giving scripts access to the DOM and the ability to issue requests.

Julian’s talk was rooted in his work on a real-world case at bwin.com, a major betting platform struggling with third-party tools such as Google Analytics and Tag Manager. He described how Partytown was used to boost performance for a site serving millions of users, along with the distinct obstacles encountered during that process.

Angular Graz Meetup: Zoneless, State and Future of Angular, etc.

Recordings from yet another Angular meetup in Austria—this one held in Graz—are now available online. The lineup featured talks by well-known figures including Manfred Steyer, Dariusz Kalbarczyk, and Fabian Gosebrink, with additional sessions from two Angular team members.

In her presentation, Emma Twersky gave a detailed update on where Angular stands today and what lies ahead. She pointed to several areas where work and exploration are happening, such as streaming and selectorless components—an idea that might remove the need to import components at all, further streamlining the developer experience.

Matthieu Riegler’s session focused on what it means to operate without zones in Angular. Historically, Angular has leaned on zone.js to keep track of asynchronous operations and signal their completion—a critical mechanism for server-side rendering. In its absence, the server would lack awareness of when the application is ready to be shipped to the client.

In addition, Matthieu showcased beta-stage services like the ExperimentalPendingTasks service, which Angular's own mechanisms, e.g., HttpClient, are now adopting internally. For developers, this service could prove handy in monitoring asynchronous work triggered by custom application logic or third-party libraries.

Angular 18.2

Version 18.2 of Angular is out, and the headlining additions are the fresh migration scripts. One is designed to swap out every constructor-based dependency injection in your code for the inject function. Although the former method remains fully supported, this shift could signal where the Angular team is steering things in the long run.

A second migration script targets lazy loading in standalone-component scenarios. If your routes employ the loadComponent attribute, you can now switch these routes to lazy loading automatically.

On the testing front, a new feature pertains to fakeAsync usage. Previously, developers needed to verify that no outstanding asynchronous tasks existed at test completion. Now, Angular can automatically flush and terminate those tasks, making the whole process more straightforward.

Elsewhere in the official blog announcement, another topic surfaced: the isolatedModules setting in TypeScript. That option could speed up the build process when using the ApplicationBuilder. Details can be found in the corresponding blog entry.

Angular Q&A Session August: Testing Guideline

The August Q&A took on a distinctive character, with Jeremy clearly focused on delivering a definitive approach to testing.

Jeremy emphasized that testing ought to mirror what an actual end user experiences as faithfully as possible. In practice, that involves testing components through their templates and using existing testing harnesses whenever they are present, forcing interactions that mimic a real user’s behavior.

When it comes to dependencies like services, Jeremy recommended steering clear of test doubles where you can manage it—oftentimes, the most solid choice is to stick with the original service. If swapping out a service becomes necessary, he suggested crafting a fake instead. A fake lets you keep authority over the test double while offering an implementation with substance.

Mocks remain a viable route, but Jeremy urged mindfulness when resorting to them. The primary pitfall with mocks is that they frequently result in merely confirming a function call, leaving broader functionality steps unchallenged.