100% found this document useful (2 votes)
3K views25 pagesAngular 20
Angular v20 introduces significant enhancements, including stabilized APIs, improved debugging tools, and advancements in reactivity with Signals. The release promotes features like zoneless applications and incremental hydration to stable status, while also adding experimental APIs for managing asynchronous state. Additionally, the developer experience has been polished with updates to the style guide, diagnostics, and integration with Chrome DevTools for better performance insights.
Uploaded by
JJCopyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF or read online on Scribd
100% found this document useful (2 votes)
3K views25 pagesAngular 20
Angular v20 introduces significant enhancements, including stabilized APIs, improved debugging tools, and advancements in reactivity with Signals. The release promotes features like zoneless applications and incremental hydration to stable status, while also adding experimental APIs for managing asynchronous state. Additionally, the developer experience has been polished with updates to the style guide, diagnostics, and integration with Chrome DevTools for better performance insights.
Uploaded by
JJCopyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF or read online on Scribd
/ 25
Openin app 7
Medium = @ sexe» a
Get unlimited access to the best of Medium for less than $1/week. Become amember x
Announcing Angular v20
18minread - Draft
£ Minko Gechev
© listen (1) Share + More
‘The past couple of years have been transformative for Angular, as we've unleashed
major advancements like reactivity with Signals and the power of Zoneless
applications. We hope these features have helped the Angular community build the
next generation of web applications with fast time-to-market and robust
performance.
MN Angular”
And we are just getting started! Angular v20 is our latest release where we have
spent countless hours polishing some of our in-progress features for the rock-solid developer experience that you deserve.
Some of the highlights:
Stabilizing APIs such as effect, linkedSignal, toSignal , incremental hydration,
route-level render mode config and promoting zoneless to developer preview
Improved debugging with Angular DevTools and partnering with Chrome for
custom Angular reporting directly in Chrome DevTools
Polishing developer experience with style guide updates, type checking and
language service support for host bindings, support for untagged template
literal expressions in templates, template hot module replacement by default,
and more.
Advancements in GenAI development with llms.txt and angular.dev guides and
videos for building Generative AI applications
Launching a request for comments for an official mascot for Angular
Promoting reactivity features to stable
We spent the past three years rethinking Angular’s reactivity model to make it more
robust and future-proof. In Angular v16 we shipped a developer preview of Angular
Signals and since then, they got a wide adoption in and outside of Google.
YouTube shared on stage how using Angular Signals with Wiz, they improved input
latency in Living Room with 35%. In the meantime, TC39 kicked off an investigation
to introduce Signals to the JavaScript language with reference implementation based
on Angular Signals.
After collecting feedback from RFCs and iterating on the implementation, we
promoted signal, computed, input and view queries APIs to stable. Today, we are
announcing effect, Linkedsignat and tosignat as stable as well.
New, experimental APIs
To tackle managing asynchronous state with Angular, in v19 we developed the
resource API. Since then, we introduced resource streaming and created a new API
called httpresource that allows you to make HTTP requests with a Signal-based
reactive API. Both of these APIs are available as part of v20 as experimental. The resource API allows you to initiate an asynchronous action when a signal
changes and expose the result of this action as a signal:
const userId: Signal = getUserId();
const userResource = resource({
params: () => ({id: userd()}),
loader: ({request, abortSignal}): Promise => {
// fetch cancels any outstanding HTTP requests when the given ‘AbortSignal”
// indicates that the request has been aborted.
return fetch(*users/${request.id}’, {signal: abortSignal}) ;
s
ns
—=Z— EP >}
The code above will fetch the user with the particular identifier, when the usertd
signal changes.
Now let’s suppose we're getting data from a WebSocket. For this purpose we can use
a streaming resource:
@Component ({
template: *{{ dataStream.value() }}°
p
export class App {
// WebSocket initialization logic will Live here...
Wove
// Initialization of the streaming resource
dataStream = resource({
stream: () => {
return new Promise>>((resolve) => {
const resourceResult = signal<{ value: string] }>({
value: (1,
Ds
this.socket.onmessage = event => {
resourceResult.update(current => ({
value: [...current.value, event.data]
Ys
resolve(resourceResult) 5
Ys
ty Ds
In this minimal example, we declare a new streaming resource, which returns a
promise of a signal. The signal has a value type ResourceStreantten , which
means that the signal can hold the value { value: string(] } or {error: .. } incase
we want to return an error.
We emit the values we receive over the WebSocket via the resourceResult signal.
Building on top of this pattern, we also shipped the experimental httpresource :
@Component ({
template: “{{ userResource.value() | json }}°
»
class UserProfile {
userId = signal(1);
userResource = httpResourcecUser>(() =>
“https: //example.com/v1/users/${this.userId()}°
Ds
+
The snippet above will send an HTTP GET request to the URL we specified every
time when the userId changes. httpResource returns HttpResourcekef which has a
value property of type signal that we can directly access in the template. The
userResource has other values, such as istoading, headers , and others, as well.
Under the hood, httpresource uses HttpClient so you can specify interceptors in the
HttpClient provider:
bootstrapApplication(AppComponent, {providers: [
provideHttpClient(
withInterceptors([loggingInterceptor, cachingInterceptor]),
I); Promoting Zoneless to developer preview
Over the past six months, we made a lot of progress in zoneless, specifically around
server-side rendering and error handling.
Many developers use Zone.js for capturing errors in their apps even without
realizing it. Zone.js also lets the framework know when we're ready to flush the
server-side rendered application to the client. In the world of zoneless, we had to
find robust solutions for these problems.
In v20 we now have a default handler for unhandtedrejection and uncaughtexception
in Node,js during SSR to prevent the node server from crashing in case of errors.
On the client, you can include provideBrowserGlobalérrorListeners in your providers.
You can start using zoneless today by updating your list of providers:
bootstrapAppLication(AppComponent, {providers: [
provideZonelesschangeDetection() ,
provideBrowserGlobalErrorListeners()
ns
In addition, make sure you remove the zone.js polyfill from your angular.json «
Learn more about the benefits of zoneless and how to transition your project in our
documentation.
If you’re creating a new Angular project, you can get it to be zoneless from the start
using the CLI: Solidifying Angular on the server
In v20 we also focused on polishing our flagship server-side rendering features —
incremental hydration and route-level rendering mode configuration. Today, we're
happy to promote both of them to stable!
As a reminder, incremental hydration makes your apps faster by downloading and
hydrating a portion of the page on a particular trigger. This way, your users don't
have to download all the JavaScript associated with a particular page, instead they
can gradually download only the parts that they need.
To start using incremental hydration today, configure hydration by specifying
withIncrementalHydration :
‘import { provideClientHydration, withIncrementalHydration } from '@angular/plat
provideClientHydration(withincrementalHydration());
———— >
In the templates of your components now you can use deferrable views: @defer (hydrate on viewport) {
('onClose', result => console. log(result)),
// Creates two way binding with the title property
twoWayBinding(‘title', title),
1,
directives: [
// Apply the ‘FocusTrap’ directive to ‘MyDialog’ without any bindings.
FocusTrap,
// Apply the “HasColor’ directive to ‘MyDialog’ and bind the ‘red’ value tc
// The callback to “inputBinding’ is invoked on each change detection.
t
type: HasColor,
bindings: [inputBinding(‘color', () => 'red")]
+
1
Ds
SD >
Above we create a dialog component and specify:
© canctose input binding, passing the signal canctose as a value
* Set the output onctose toa callback that logs the emitted result
* Two way binding between the title property and the title signal
Additionally, we add the rocustrap and Hascotor directives to the component.
Notice that we can also specify input bindings for the Hascotor directive that we
apply to MyDialog .
Extended template expression syntax We've been bridging the gap between Angular template expressions and full
JavaScript syntax to enable higher expressiveness and better developer experience.
Today, we're introducing support for the exponential operator +» and in operator:
{Ln 23}
{{ name in person }}
In v20 we also enable you to use untagged template literals directly in expressions:
Extended diagnostics
To guard against common errors, we introduced static checks that detect invalid
nullish coalescing, detection of missing imports for structural directives, and a
warning when you don't invoke the track function you've passed to efor :
@Component ({
template: *
Gfor (user of users; track trackFn) {
