Angular 22 reached next.10 version and brings a cynosure feature: injectAsync helper. This changes how we load dependencies in components. The framework also defaults paramsInheritanceStrategy to 'always'. Node.js 26 support lands with Temporal API enabled by default.
Hi, my name is Tom Smykowski, I'm a staff full-stack engineer. I build and scale SaaS platforms to millions of users, working end-to-end from system architecture to frontend to mobile. On this blog I write about Angular, modern web development, and framework evolution
It was quite a while since we've moved from injecting dependencies in constructor in Angular. The change to using inject function made it so much easier to follow what component does, and made the whole declaration clearer. I never liked the constructor injections for DI anyways.
Now we move further thanks to the overhaul that Angular did, and now we'll be able to not only inject deps in components but also inject them asynchronously.
What is injectAsync?
The injectAsync helper function allows you to load dependencies on demand, rather than bundling everything upfront. This is a big change because it means components won't have to wait for dependencies to load, causing a faster and smoother experience for users.
Here's how it works:
import {injectAsync} from 'angular/core';
class MyCmp {
someSvc = injectAsync(() => import('..'));
async onClick() {
(await this.someSvc()).handleClick();
}
}
We can see that injectAsync uses a familiar pattern to that we use for asynchronously loading route pages. But in this case we asynchronously load dependencies on a component level.