Andrew Scott

@naveedahmed @BrowserPerson github.com/angular/angula… it’s dev preview now

@BrowserPerson Is it still experimental? It's been quite some time since we've been using it in production without any issue

#Angular experimental feature: you can enable view transitions in the Router by running the route activation and deactivation inside of document.startViewTransition. #100DaysOfDocumentation angular.dev/api/router/wit…

@zoaibdev If you’re trying to observe when Angular runs the application synchronization, you might consider afterRender instead.

Second is about signals. Notice in the second box, when the signal is updated through a timeout: It doesn't trigger change detection or at least doesn't appear to (I'm listening using ngDoCheck). But the value still updates... Is this the fine grained reactivity with signals?

🧪 Playing around with the new experimental Zoneless support in Angular v18! Created a demo app - which shows component data changing from 4 sources - property, signal, input and an observable (with async pipe). The bell ringing means change detection! See anything odd? 🤔

@zoaibdev Yes, this’ll be due to the “fine grained reactivity”. ngDoCheck runs when the parent is refreshed. ChangeDetectorRef.markForCheck (and listeners) mark everything up to the root for check while signals will skip straight to the component with the signal read.

@Arnoud_dv @Jean__Meche In v18, you also won’t need zone.run anymore to trigger change detection when you set a signal outside the zone. This works even for apps using ZoneJS

@Jean__Meche Oh that’s great! Thank you

Are you looking to make your #Angular library zoneless compatible ? If you're looking for some help or some insights feel free to reach out to me ! Let's open new horizons ! 🌅 #RoadToV18

@minijus @Jean__Meche We’ll have a better picture of this as we gather feedback during experimental and dev preview phases. The path now is roughly: use OnPush, enable zone event coalescing, enable run coalescing, remove all NgZone.onMicrotaskEmpty/onStable uses. SSR is a bit more additional work.

@Jean__Meche How the path to become zoneless for big applications could look like? Any tooling to identify zone dependant solutioms, migrations etc?

Any question about going zoneless for your #Angular apps in v18 ❓ Feel free to drop your questions ! ⬇️

@Deku_Nattsu @Jean__Meche Yes. We want to/will eventually have this in some form (ability to not automatically call markForCheck when a listener is triggered)

@Jean__Meche Oh i see. I wonder if there would be a way to prevent that from the template? I usually find the need to do that on mouse move and scroll events

@jbnizet @Jean__Meche @Deku_Nattsu You’re exactly correct. This was done because we want the transition from OnPush to Zoneless to be as easy as possible. We want to/will eventually have an option that does not automatically mark for check when a listener is called.

@Jean__Meche @Deku_Nattsu I guess that makes things easier and similar to what OnPush does, but is it really necessary? Shouldn't that listener eventually cause a signal change that, in turn, triggers CD? And shouldn't CD be skipped if the listener doesn't change state?

@eugeniyoz @Jean__Meche This means that ZoneJS has some more behaviors than just running change detection. And zoneless needs a replacement for those "other features". The concept of "stability" needs a replacement in Zoneless as well (i.e. for SSR).

@Jean__Meche I hope this tweet will not be read as “Angular Zone.js = stability (good), Zoneless Angular = some unstable thing (bad), so we better ignore Zoneless Angular”. Matthieu means “stability” as a stage (phase) between changes. Zoneless Angular is what we all should aim for 😎

When we talk about zoneless in #Angular, people first think of Change Detection. This makes sense since zone is the CD scheduler. But it is only a part of the topic. NgZone also provides the concept of stability. Stability matters in numerous cases (SSR, tests, dom interaction, lib integration etc).

@mohanramphp @Enea_Jahollari Sometimes errors might happen that you can resolve in a different window, such as an expired authentication cookie. Logging back in resolves the issue and in this case you could just refresh the page and it would load the page that was originally attempted instead of 404 again.

@Enea_Jahollari Why we need this. To avoid user to bookmark the 404 page?

✨A new feature is coming to Angular Router 🚀 We will be able to set a different browser URL from the one for route matching 🎉 Why it's needed? This is useful for redirects where you want to keep the browser bar the same as the originally attempted navigation but redirect to a different page, such as a 404 or error page. Issue: github.com/angular/angula… This issue is 7 years old btw 😅 Better late than never 🙏 Thanks to @AScottAngular 🙌 #angular

@viperoni8 @Enea_Jahollari UrlTree redirects could not also include behavior options so the example had to create a new navigation instead. Redirects with options are now possible with github.com/angular/angula… and the documentation example was updated.

@Enea_Jahollari Why don't you just return router.createUrlTree instead of false?

@SergeyGultyayev @Jean__Meche @synalx @Enea_Jahollari To be fair, any change to the exact timing of change detection can have this effect. Coalescing will be the default for new apps in v18.

@Jean__Meche @synalx @Enea_Jahollari 😨

INP is in 🎉! Best tools in Angular to solve your app's INP: - defer block - *rxLet, *rxIf, *rxFor (RxAngular directives) #angular

@eugeniyoz @pkozlowski_os @Jean__Meche On its own, the circular update isn’t a problem. If you had a condition around the update to only update it sometimes or it gets updated to a value that’s equal to the previous one. The problem is that the cycle is never broken.

Do we have all the needed information in the ReactiveNode fields to prevent circular updates like this? If we have the whole tree, maybe we could detect that the current effect() is trying to update a circular dependency. @AScottAngular @pkozlowski_os @Jean__Meche

@SimonBitwise 👍 Okay, yea. It’s great to see the excitement and enthusiasm here. I just wanted to be sure expectations were appropriate so you aren’t disappointed with our ability to support you through the process.

@AScottAngular Yeah i get it - i don't blame anyone I'm just trying to hack a very nice working environment together that's all

Hi #angular, I know I'm using some early RC features here but anyhow. I'm trying to use the new fixture.componentRef.setInput('id', 'test'); But it seems that it doesn't update if I'm running zoneless even though it is an input signal Here is some more code Anyone know why?

@SimonBitwise To be clear about the Zoneless API: it is _not_ developer preview. Things being broken is entirely expected and we have no commitment to resolving any issues you encounter in a timely manner.

@AScottAngular Found a tangible bug in the input signal which is not directly correlated but could be the same bug github.com/angular/angula…

@SimonBitwise github.com/angular/angula… github.com/thymikee/jest-…

@AScottAngular It looks like it doesn't support the new input.required() logic based on the NG0303

@SimonBitwise To be honest, I can't say for sure. The repo in its current state is using 17.1.0. When I update things to use 17.2.0-next.1, it does run change detection with the updated input. As far as I can tell, everything's WAI.

@AScottAngular Havnt been on the Home laptop all day so its not the latest screenshot - if you’d like i will keep you posted when i get it pushed

@SimonBitwise That version should have the required change. Do you have a reproduction? Kind of hard to tell what’s happening in the screenshot.

@AScottAngular Im using 17.2.0-next.1

@JVAsays @JayCooperBell @brandontroberts @angular Yes, but that’s actually kind of already the case. If you use OnPush in the components of your app, everything below them need to also follow OnPush semantics correctly or your app components will prevent the Default components in libraries from working.

@JayCooperBell @brandontroberts @angular But still assumes all libraries follows the rules....which I think will be a battle for a good long while.

@brandontroberts @angular Ohhhh baby!

@AlejandroRzJz @tomastrajan The first example from the blog post felt satisfying and shows how far the framework has come in only the past few releases. stackblitz.com/edit/stackblit… Standalone, self closing tags, input transform, tree shakable router features, input binding, view transitions, styles string.

@AlejandroRzJz @tomastrajan Thanks! We tried hard to strike a balance between power and simplicity and I think we found it!

#Angular 17 support for ViewTransitions API is 🤯🔥 Just add withViewTransitions() and unique name to component (same name in origin and destination page), eg style="view-transition-name: blog-{{blog.id}}-cover" and you're set for amazing UX!