Menu
This article mentions that
Ivy opens a few possibilities for the future though. It should now be possible to run an application without zone.js, and to semi-manually handle change detection (a bit like you would with React). These APIs already exist but are experimental, not documented, and will probably change in the near future.
I think it was already possible to run an application without zone.js prior to Ivy. Does Ivy allow to semi-manually handle change detection? Where are those experimental APIs? Any doc? Does Ivy still use zone.js?
My goal is to limit change detections to a minimum by triggering them manually. What is the best option to do that. Specifically what is the best option when using Ivy.
796
Ivy is a complete rewrite of Angular's rendering engine. In fact, it is the fourth rewrite of the engine and the third since Angular 2. But unlike rewrites two and three, Ivy promises huge improvements to your application. With Ivy, you can compile components more independently of each other.
By default, Angular Change Detection works by checking if the value of template expressions have changed. This is done for all components.
Another feature of Angular's ivy renderer is 'tree shaking. ' This feature is used on the app components during its rendering phase. Angular's ivy renderer removes all unused chunks of code during tree shaking, resulting in a lighter application that loads much faster.
It is expected that users can experience a 40 to 50 % increase in speed in their app testing. Ivy discloses new additional capabilities to Debug mode that allows you to manually update stage, trigger change detection, call method and access instances of components. Angular Ivy also made improvements in the stack trace.
All you need to know and why you should migrate your project to Angular Ivy. The big buzz word that has been going around since the release of Angular 9 has to be Angular Ivy. Angular Ivy, also known as “Angular next-generation compilation and rendering pipeline ‘s,” is the replacement of the previous View Engine compiler in the Angular framework.
In Angular 10 and Angular 11, Ivy completely takes over the compiler (Angular Ivy compatibility compiler) and provides a stronger core structure than ever. Ivy is a very important stepping stone in Angular history.
Each Angular component has an associated change detector, which is created at application startup time. For example, take the following This component will receive a Todo object as input and emit an event if the todo status is toggled. To make the example more interesting, the Todo class contains a nested object:
That's a huge topic to cover here, but I'll try to answer.
The idea is actually rendering components without declaring them inside any module.
Why would we wanna do something like that? It simple - Modules are much more than just components. Modules have zones, providers, injectors, DI, and much more. Modules for a lot of us represent applications. And sometimes we just want to create a simple component and render it in another component.
What's the problem it will cause? Modules are the one who sets up zones for us. Zones are the ones who trigger change detection automatically. If we will render a component outside a module, we won't have automatic change detection.
So, with Ivy, we have a few new APIS that can help us:
ɵrenderComponent() - That can render a component without declaring it in a module.
ɵdetectChanges(); - To trigger change detection manually, but, it's just a function from @angular/core and you don't need the DI any more to inject the ChangeDetectorRef
ɵmarkDirty() - To mark the component to check in the next change detection cycle.
ɵɵdirectiveInject() - Inject an InjectionToken in a matter of function, without using the constructor.
If you asking what is this ɵ sign that prefix all those new APIs, that means those functions are still experimental and you shouldn't use them for production yet. And that's also why they are not documented.
For your question - if you want to minimize the use of CD in your components, just render them with renderComponent function, and handle CD by yourself.
If you want to read more, I wrote a complete blog post exactly about this topic, including a lot of code examples. You can find it here - "The future of standalone components in post Ivy release days"
I also gave a talk about it in NG-DE 2019 - "Bye Bye NgModules"
50
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
