Table Of Contents
Slides
Lingo
Rendering architecture
Virtual DOM
Incremental DOM
Enable Angular Ivy
Enable Ivy in an exist...
For further actions, you may consider blocking this person and/or reporting abuse
I've noticed that in Angular 9 with Ivy enabled, the component definition is put in the static property
ɵcmprather thanngComponentDef.This is also apparent in some of your compiled code examples.
Indeed, I have noticed as well, but during the Angular Connect 2019 in different cases that code has been called as compiled/generated.
I am waiting some feedback (if they will arrive) from Angular team members, but I guess that the clean and clear code is taken from some intermediate compilation steps and what we see if the final one emitted by the tsc.
I have checked before writing the post and the presentation and often they refer to that code (text(), etc) as compiled, generated, emitted by the Angular compiler.
I should try to see what happens with the ngc alone.
I keep you posted and then I update the post.
Thanks a lot for your reviewing work, appreciated :-)
ngComponentDef was in Angular version 8 with Ivy enabled.
I have taken from the slides of the AC 2019, youtube.com/watch?v=S0o-4yc2n-8&li... min 2:00 on going
This was presented 3 months ago. I first noticed it in RC0, but it might have changed before that.
Slides might say one thing, but code doesn't lie 😬
I have been experimenting a lot with Ivy and View Engine in different versions lately.
Totally agree that the code does not lie, I have considered what they have presented, I will add a small note to the post so people are aware that stuff are moving.
Once 9.0.0 will be out I will check write another post, but for the time being too afraid to see changes from one day to another.
Thanks a lot again for your support, it was I was looking for :-)
Yeah, I will also be keeping an eye out. I'm thinking of creating a library for Angular library authors to detect Ivy vs. View Engine, production vs. development mode, testing vs. running app.
It would be awesome 👍
Hello,
in the meantime I have fixed the Uglify stuff and added the code compiled with the RC5 :-)
RC6 now. (Will Ivy be a 2019 release?)
Well unless they sped up for the New Year’s Eve otherwise 2020 😊
New finding: The
ngComponentDef/ɵcmpkey can be determined by importingɵNG_COMP_DEFfrom@angular/core. So in version 8,ɵNG_COMP_DEFwould evaluate to'ngComponentDef'whereas it would evalute to'ɵcmp'in Angular version 9.There are similar key constants for directives, pipes, and Angular modules.
Really nice hint! I will have a look, I am working a post about compiler pipeline.
Oh dear, I just discovered that this export was called
ɵNG_COMPONENT_DEFin Angular version 8, but is renamed toɵNG_COMP_DEFin Angular version 9 😔The Angular CLI uses Terser for minification, not Uglify.
I have to double check because during the Angular Connect 2018 they talked about Uglify plugin, may be they have changed the implmentation, thanks, much appreciated :-)
Terser is listed as a dependency in Angular CLI's package.json and used in Angular builder.
In the past, they used
uglify-es, but it became abandoned and a fork turned into Terser.Angular 9 is currently in RC5*
Angular stable is version 8.2.14.
Thanks, fixed it!
Added note on the latest stable version of Angular. I think you got it confused with Angular CLI which is at 8.3.x.
Fixed that already with the previous.
8.2.14, not 8.2.9 🙂
How can libraries be converted on the fly into Ivy compatible libraries during the build or installation process.
Is this something we can do now or is it something that will be available later?
Hello,
sorry for the delay, I am currently writing a post more focus on the compiler so I will investigate a bit better on the latest RC since things change quite quickly.
For the time being, citing the Compiler Model document on GitHub
Sounds good. Thanks for the reply.
Hi Eugenio and thanks for the nice article!
I have a quick question though. Do you know if there's a way to use angular material precompiled in Angular 9? Right now ngcc recompiles all libraries on every build, which takes quite a bit of time, while I find it hard to believe there isn't a way to not do that for an official library which @angular/material is.
Any ideas?
The new Ivy engineering has been driven by three main goals: three-shaking, locality and flexibility.It should be
tree-shaking, right? :)))Anyway, great article, saves me a lot of time.
Yep, you are right, fixed the typo, thanks :-)
Great work Eugenio, thank you for sharing!