🚨 Angular 18 Is Out: Zoneless Upgrade (Step-By-Step)

[@AngularUniversity]

Enjoy the new Angular 18 Zoneless support 😉One of the most convenient ways of writing zoneless applications is by using Signals. If you want to learn them, check out my ongoing Modern Angular With Signals Course - angular-university.io/course/angular-signals-course

[@ShadowBlackzZ]

Well, we’re officially leaving Zone.js , we’re entering the new future of Angular🎉

[@AngularUniversity]

Yes, we are go for launch 🚀

[@LarsRyeJeppesen]

We completed the transition, took 5 minutes and works flawlessly. Just some @angular/fire issues. nice

[@andyloren4826]

Yeah, finally, let's celebrate it!

[@yufgyug3735]

barely managed to update few of my teams apps to angular 17, now have to update them again to 18 haha. great content as always.

[@AngularUniversity]

They just keep them coming those releases, don't they? 😉 I'm still migrating to signals as well 👍

[@Brendan2Alexander]

Excellent video thank u! Am going to go zoneless immediately. Rock on!!

[@AngularUniversity]

Thank you Brendan, have fun trying Zoneless. 👍 It's way simpler and less complicated than it sounds. 😊

[@bones_twisting_sorrow4750]

great rundown as always

[@AghileshT]

@AngularUniversity Thanks for switching to the VS Code dark theme 🤝, which I commented on Angular Signals video.

[@AngularUniversity]

Yes this theme is much better, I prefer it way better to any other theme. And I get all the power of Webstorm behind it, thank you for the suggestion. 👍😊

[@MonaCodeLisa]

you are quick, cool video thank you for sharing :) I still need some time to wrap my mind around some things

[@AngularUniversity]

Thank you, please enjoy the video 😊

[@eduardo.hernandez91]

Great video! Angular 18 is amazing, but I would like to use zone-less when it is ready for production. Thanks for sharing.

[@AngularUniversity]

Yes, it shouldn't take long. I think they only have a few corner cases remaining like certain scenarios of server-side rendering for example. 😊

[@LarsRyeJeppesen]

We already use it in production :)

[@AlainBoudard]

Very nice presentation of Angular 18 ! Thanks Vasco 👌😎

[@AngularUniversity]

Thank you Alain, you're welcome. 😊 Enjoy 👍

[@bartekaszczuk5201]

It looks like it works exactly the same as OnPush - as if OnPush were the default change detection strategy.

[@AngularUniversity]

Yes it works very similarly. Applications using OnPush should have little trouble upgrading. 😉

[@anutaNYC]

This is insane, I haven’t even figure out signals, control flow and now this!! We just started a new project in 17 thinking it’ll be the latest, Took a while to even upgrade for 16 to 17 in a new project!!!

[@AngularUniversity]

The upgrade to 18 will be seamless unless you want to turn on Zoneless and were not using OnPush. 👍

[@anutaNYC]

@@AngularUniversity the problem is I'm still swimming in how signals work vs using observables and my team is resisting in using signals untill I prove they are better, the problem I'm not sure the extent of work to move everything to signals, again because I don't understand how to set them up and use instead of subscriptions:( I need help with exact examples on how to take let's say service I have that uses behavior subjects and the subscribes to them for the changes

[@anutaNYC]

@@AngularUniversity also I just made some weird fix for change detection, wish I knew how to work with signals and zoneless to avoid it all 😂

[@AngularUniversity]

@@anutaNYC You mean expression has changed after it was checked? 😉

[@tranquillityEnthusiast]

Im still in hangover of 17, Already 18 released 😅🤣 👍

[@AngularUniversity]

They keep them coming, right? 😉

[@tranquillityEnthusiast]

@@AngularUniversity yup

[@LarsRyeJeppesen]

Every 6 months.. been like this for many years

[@phreakadelle]

Looks very promising! :) Wanna try it soon!

[@AngularUniversity]

Enjoy the release 😉

[@codeme8016]

Great video. Thanks a lot!

[@AngularUniversity]

You're welcome 😉

[@LarsRyeJeppesen]

Just a heads up: some 3rd party libraries will crash/break if they cannot use zoneJS. Many of them expect zoneJS to be present. Example: ng-toastr, @angular/fire

[@AngularUniversity]

Yes 😊 like ng-bootstrap, etc, won't work. I only use custom made components and Angular Material in my projects, with maybe a color picker external lib and that's it. I avoid using anything else because of this, some stop getting updated etc. 👍

[@youngandfree93]

Angular Fire is unfortunate though since I used Firebase alot on Angular projects. I guess we need to configure to Firebase manually without angular fire?

[@dryphresque7113]

Thank U for this video excellent video

[@AngularUniversity]

Thank you, you're welcome 😊

[@big_time_banana]

Thanks for the helpful and easy-to-follow video! When I followed your instructions to refactor my app to zoneless, I am getting a ReferenceError: Zone is not defined. Any tips on how to resolve that?

[@AngularUniversity]

You're welcome, I'l glad you enjoyed it. 👍 I think you might have forgotten to set up the correct provider, because it seems that some part of Angular is still trying to use Zones.

[@big_time_banana]

@@AngularUniversity I just figured out the problem, thanks to a GitHub bug report from another developer. As of now, the Angular Fire package still expects zone.js to be present, and will fail if it's not loaded. They are working on an updated version that doesn't require zone.js to be loaded. For now, though, if you use Angular Fire, you still have to load zone.js.

[@josuefreitas2864]

So, now I need to know how and when I have to update the page content manually? This seems like a step backwards, from my point of view it's a very expensive change, performance for me has never been a problem in my Angular applications...

[@AngularUniversity]

If you use signals, or the async pipe, you don't have to use the change detector ref. The recommended approach is signals 👍

[@madeOfClay99]

Vasco, what are your thoughts on the current Angular Material v18? I personally think that the colors, in some components, such as buttons are messed up, the default themes have applied a very strange use of colors, or should I say, have applied colorless colors

[@AngularUniversity]

I thought the use of gray in the dropdowns was weird, my first reaction is I didn't like it that much either, I don't see the improvement. 👍

[@TheSysmat]

Experimental I have problems with NG bootstrap modal, tool tips, toast,....

[@AngularUniversity]

Yes those won't work indeed. I only use custo made or Angular Material which is all based on OnPush, so that it why it works.

[@LarsRyeJeppesen]

This is because those 3rd party libs expect zoneJS to be present. @angular/fire has the same issue. Solution: keep zoneJS in polyfills but still use zoneless change detection

[@TheSysmat]

@@LarsRyeJeppesen NG0914: The application is using zoneless change detection, but is still loading Zone.js. but still not working

[@TheSysmat]

provideZoneChangeDetection and in angular.json "polyfills": [ "zone.js" ] will work fine, thx

[@rohitkharche7562]

Can you make a video on using new material 3 by default

[@AngularUniversity]

I think it's almost identical to the previous version, with a few tweaks here and there.

[@Brendan2Alexander]

So I am combing thru a few apps to prepare to go zoneless. All going well...but I am stumped as to what to do with my reactive forms. Will they continue to work? (haha I will soon find out eh?!)

[@AngularUniversity]

I tried with a simple signals app, and the forms where working fine, but haven't tried it yet in a more complex app. 👍

[@Brendan2Alexander]

@@AngularUniversity good to know. now if i could only get my nx workspace to behave...

[@vasanthy2k7]

I am still using angular 8. 😢

[@mmorgan4x]

when using zoneless, will change detection strategy matter which is selected, default vs on push?

[@AngularUniversity]

Good question, as far as I know, Zoneless is it's own thing. default for sure won't work, OnPush haven't tried but it's essentially the same behavior. Let's see what the Angular team says in the session that is just getting started. 👍

[@SkyDeveloper-gy6hd]

The Angular 18 Zoneless Change Detection isn't working with AngularFire v18, it produces error when you try to run your App (ReferenceError: Zone is not defined) and causes the App not to run at all... Any fix for that?

[@AngularUniversity]

Lots of community libraries don't work with zoneless, that is why it's still marked as experimental. Depending on the amount of external libraries that you use, it might be doable or not to use it at this stage. 👍

[@gauravsahu3828]

Is it necessary that if object defined in signalstate will only have deepsignal property.. can we achieve that in component? Without using signalState .?

[@AngularUniversity]

If you are storing your state in an object, the signal() property will emit a new value when any of the properties changes. What you need to avoid it is something like NgRx Signal State, have a look at this video for more details - kzbin.info/www/bejne/kJ3GfWOahtubY7c

[@markgagnon28]

love angular but miss the vuejs hmr when developing. Do you know of a way to replicate the hmr now that esbuild/vite is stable?

[@AngularUniversity]

The current Angular CLI is blazing fast, and it doesn't reload the whole application anymore. It's a completely new experience than 6 months ago. 😊

[@CodeZakk]

i think they should also update to use all the files in one .ts file instead of creating .ts and .html may creating .ng to wrap all the file. thanks for the content😊😊

[@AngularUniversity]

You're welcome, the Angular team is going on that direction of providing alternatives for single file components. 👍 Personally my components tend to have quite a bit of CSS, so I prefer to keep that on a separate file. I'm more looking forward to the functional authoring format. 😊

[@LarsRyeJeppesen]

No thanks

[@_Afsus]

What's the importance of it?

[@AngularUniversity]

I think it's quite nice, it's one step forward to remove zones ans get rid of weird errors like Expression has changed after it was checked, etc.

[@adambickford8720]

I've never heard anyone prefer vscode theme to darcula!

[@AngularUniversity]

Trust me on this one, it's waaaayyy better 😉

[@adambickford8720]

@@AngularUniversity I've used both and couldn't disagree more lol

[@madeOfClay99]

For me it is the other way, I use VSCode with darcula theme, I am unable to use other theme. Darcula is perfect

[@ErnaSolbergXXX]

angular feels like its made by dirty fixes to fix other dirty fixes.

[@AngularUniversity]

Just like the browser, Windows, or many other successful technologies that never broke backwards compatibility. 😊👍

[@ErnaSolbergXXX]

@@AngularUniversity that just not true. If you used angular for something more than a «hello world» project there will always be something broken between the upgrades.

[@AngularUniversity]

@@ErnaSolbergXXX I've been upgrading several applications with every release, some even since the first Angular CLI came out, and the upgrade migrations work flawlessly. I just upgraded my main code base a couple of days ago to 18, it worked great. but you do need to have context about what the release did.

[@Nabulio85]

Thank you Vasco. Explanations always as clear, precise and concise. 🙏🫶

[@AngularUniversity]

Thank you, I'm happy to hear that 😊

[@sudharsanamtk]

Still a simple hello world is 500kb

[@AngularUniversity]

They are working on it, it though it was 300k something last time I heard about it. 👍

[@valeriyaleksandrovich2707]

How to difficult to listen you

[@AngularUniversity]

The sound is not good? Accent too strong?

[@valeriyaleksandrovich2707]

@@AngularUniversity Accent too strong. There is a big difference when the text is read and when an explanation is given on one’s own