Angular 18 updates: TypeScript 5.4 support Defer views (lazy loading of dependencies) moved from developer preview to stable stage Route redirects with functions: more flexible and opens up new possibilities in routing management New redirect command: enhances redirection capabilities within guards and resolvers Zone-less change detection: change detection operates independently without intermediaries like zone.js Template local variable with @let block Core improvements: ongoing efforts to refine change detection, rendering, and dependency injection Enhanced Angular DevTools: various enhancements to debugging tools for simplifying the debugging process Improved forms API: several upgrades to streamline form creation and validation Upgraded in-template API: simplifies template creation and utilization Support for web components Enhanced internationalization capabilities Introduction of a new router API
Awesome release. 😊 Here are the highlights I found (timestamps below): - zoneless change detection is available in experimental mode, not developer preview. Community libraries are often not compatible with it (yet) - it will be possible to develop libraries in Angular independently if they will be used on a Zone or Zoneless application - new Angular 18 will use Hybrid change detection by default - forms and router will be integrated with signals - Angular material components now support SSR Hydration - SSR Hydration support for i18n in developer preview - SSR rendering mode selection for routes - we will be abot to configure which routes are rendered on the client only, on the server, or at build time - Material 3 is available, Material 2 themes still supported - Signal-based APIs: input, output, model, viewChild, viewChildren, contentChild, contentChildren - Typescript upgraded to 5.4 - default ng-content is available - new forms events observable Timestamps 00:00 Intro 1:17 Zoneless Angular 4:43 Hybrid change detection 6:56 enhanced support for SSR hydration 9:46 Material 3 12:10 new Signal-based APIs 16:27 default ng-content 16:41 forms event observable
Sir/mam I am college student i am learning front end developer I know html and css and javascript and typescript I confused react vs Vue vs angular which one is best but I like angular then I have one daut angular demand in future? How many percentage job opportunities in angular?
Best parts of angular 18 are - Singla inputs (input()) - Model inputs (model()) - Signal query (viewChildren) - Material 3 theming - Angular forms global observable
Most is under the hood (zoneless) and it's amazing. The best "developer side " feature are imho: form component event stream (amazing amazing amazing).
The new control flow and forced move to stand alone component is amazing. The only thing that’s still annoying is change detection and if they make that work better then we’re in business
Thank you so much for giving so much new new functionalities in new version from angular 14-15-16-17... bcs of that i am very excited to learn new things... also i think angualr will be going to the bummmm......in market in feature bcs of new functionalities
Really cool changes and improvments. I'm really looking forward for the zonelessness of Angular. Though I'm kind of sad, that the server.ts file is still ignored when serving. Would be huge for adding oidc to angular applications directly without any other technically unnecessary api. Thanks for the framework
According to ChatGPT 4o, May 5, 2024... Q: Please briefly explain what ZoneJS does in the first place, and why on God's green earth would the Angular team remove it from their ecosystem. A: ZoneJS Overview: ZoneJS is a library that provides a way to track and intercept asynchronous operations in JavaScript. It essentially creates execution contexts called "zones" that wrap around asynchronous operations like setTimeout, promises, or AJAX calls. When an asynchronous task is completed, ZoneJS can trigger change detection to update the view, making it particularly useful in frameworks like Angular. Key Functions of ZoneJS: 1. Automatic Change Detection: ZoneJS helps Angular know when to update the view by automatically triggering change detection after any asynchronous operation completes. 2. Error Handling: It provides a centralized place to handle errors from asynchronous operations. 3. Task Tracking: ZoneJS can keep track of long-running tasks, helping to identify potential performance bottlenecks or memory leaks. Why Would Angular Remove ZoneJS? The Angular team considered removing ZoneJS for several reasons: 1. Performance Improvements: ZoneJS can add overhead to applications because it wraps many asynchronous APIs, which can impact performance. Removing it could make Angular applications faster and more efficient. 2. Simpler Change Detection: With the advent of more powerful and efficient change detection mechanisms, such as those provided by Reactivity systems (e.g., RxJS, signals), the need for ZoneJS decreases. 3. Increased Flexibility: Removing ZoneJS gives developers more control over when and how change detection is run, allowing for finer optimization and less reliance on a global mechanism. 4. Modern JavaScript Capabilities: JavaScript has evolved, and modern features like async/await and better promise handling reduce the need for a library like ZoneJS. In essence, removing ZoneJS aligns Angular with modern web development practices, aiming for improved performance, simplicity, and flexibility. However, such a move would also require careful consideration of how developers can effectively manage change detection and error handling in its absence.
And according to Gemini, May 5, 2024... Q: Please briefly explain what ZoneJS does in the first place, and why on God's green earth would the Angular team remove it from their ecosystem. A: Zone.js is a library that creates special execution contexts in JavaScript, kind of like mini-environments. In Angular, these contexts (called zones) help track changes within an application and ensure the view stays up-to-date. It intercepts things like asynchronous operations to make sure everything is in order. So why get rid of it? Well, Zone.js can add some overhead, and the Angular team is looking for ways to make their framework faster and more lightweight. They're also working on improving Angular's change detection so it might not need Zone.js as much anymore. It's important to note that Zone.js is still supported in Angular, but the team discourages using it outside of Angular applications. And who knows, maybe someday it won't be needed at all.
We have an update guide at angular.dev/update-guide that can give you some insights on the move from 12 to the latest version. Since 12 we've added signals, SSR, @defer, new control flow, standalone components (option modules) and more. Lot's of new features to enjoy.
Can anyone tell me if it's ok to continue to use observables with template async pipes rather than signals? Do you gain anything with signals? I just prefer using rxjs to signals.
With firebase hosting I can manage multiple environments by having multiple firebase projects and just clone my deployed app from one project to the other with `firebase hosting:clone myrpoject-dev:live myrpoject-prod:live`. How can I do something similar with app hosting?
No, you don't have to use lazy loading. You can configure lazy loaded routes or use something like the new @defer syntax. Also, NgModules are optional and the team recommends using standalone components.
But what will be the cost of zoneless Angular application? Signals everywhere? I don't want to use Signals everywhere. A number should stay a number (const n = 3) and not const count = signal(3);. Will a zoneless be possible without Signals everywhere?
No. Change detection will be triggerede by : 1) signals updates, 2) user events (click etc), 3) async pipe updates (so, Observable streams) if you use OnPush (and you are, for sure right?), and 4) manually calling changeDetection.markForChanges()
Zonless does not mean you can't refference variables in the template. If you have a constant then that constant won't change so it does not have to be a signal.
@@LarsRyeJeppesen Then this is trash ... they should find a solution to improve their change detection, not putting Signals everywhere ... Time to look for another framework ?
@@_Greenflag_ what's wrong with Signals? You will soon get best change detection of all frameworks, down to the div. All frameworks except React now use Signals. React is much worse, using the clunky hooks to change detect.
You don't have to make everything a signal at all. If you don't think it's going to change and you don't care about the changes in the template, you can just keep making primitives as class properties for sure.
So zoneless reduces package size and isn't really needed in a application fully using onPush change detection, and signals. I don't really see why zoneless is a big deal. What benefit does it add? Can someone explain how this makes my site better? I understand how zones are used now, and when we use outside zone for infinite scroll. I'm just not understanding how removing them from the entire site makes a big difference. I guess it forces you to use certain patterns... so It pushed your dev team to use better state management and change detection. But if I'm already doing that whats the real advantage.
Migration to new build system isn't documented well. Now I spent week for migration. Most of changes made after looking through the source of involved libraries of devkit. I am very sad that angular don't provide way to tune build process, in this case very helpful angular-builders library.
@@marktechson Also i wish to view documentation about integrating libraries with WebWorkers, i.e. PdfJs, Monaco Editor. For now it looks imposiible or very ugly from the box
Why cant just angular team release every 3 years and come up with radical breakthrough rather than giving incremental updates and overloading developers. We as a developer are overwhelmed with angular version updates.
Sir/mam I am college student i am learning front end developer I know html and css and javascript and typescript I confused react vs Vue vs angular which one is best but I like angular then I have one daut angular demand in future? How many percentage job opportunities in angular?
If you buy a new book or course to learn Angular it's already outdated. You never stop learning and buying Angular stuff. It's boring and disturbing. It's seems like Angular was invented with the only purpose of making frontend development a messy chaos! But don't hate me! I like Angular like a person with Stockholm syndrome.
Will 18 have the long needed request and response di tokens needed for ssr? This is preventing us from coming off Angular Universal EDIT: I’m getting frustrated my comment was just ignored
