Ivy Renderer (beta) #21706

IgorMinar · 2018-01-22T19:23:33Z

Overview

Ivy is a new backwards-compatible Angular renderer focused on further speed improvements, size reduction, and increased flexibility.

Ivy is currently not feature complete, but can be tested via enableIvy: true angularCompilerOptions flag.

We currently expect Ivy to remain behind the flag until it's feature complete and battle tested at Google. In the meantime you can check out this Hello World demo.

To see status of Ivy implementation go here.

Related Issues:

Tree-Shakeable Providers Followup Work

The text was updated successfully, but these errors were encountered:

ansarizafar · 2018-02-08T05:36:56Z

Looking forward for an early release.

AhsanAyaz · 2018-02-08T10:55:25Z

Super excited for this 👍 😄

AndreaBarbasso · 2018-02-08T16:29:48Z

@ContentChildred

A bit of a typo here 😄 still, can't wait for Ivy to be released! ❤️

avatsaev · 2018-02-08T19:03:10Z

I want higher order components 😄

hope Component Composition will land in the 6

Ploppy3 · 2018-02-08T19:06:57Z

I'm sorry to ask here (If you consider this spam, feel free to remove it), but does Ivy renderer aim at improving the runtime perf? The only info I found so far is the new features regarding i18n and the fact that it should be backward compatible. Can anyone point me toward info related to Ivy? Thank you.

chaosmonster · 2018-02-08T19:09:44Z

@Ploppy3 follow Rob on Twitter https://twitter.com/robwormald/status/961445453391790080 it also shrinks the build size e.g.

trotyl · 2018-02-11T02:43:50Z

@avatsaev The new Feature feature almost provide the same openness (against class factory), by transforming the type (and compiled metadata) itself during runtime.

Even the OnChanges hook is now an emulated feature, rather than real life-cycle hooks recognized by Angular.

chaosmonster · 2018-02-11T14:00:12Z

@avatsaev that is already possible if I understand you correctly https://gist.github.com/chaosmonster/f2576bbd1bc9a50282a2b3b492195b29

trotyl · 2018-02-11T14:01:35Z

@chaosmonster The mixin pattern is not yet generally supported in AOT mode, like life-cycle hooks recognition in #19145 and more issues described in #18644.

avatsaev · 2018-02-11T14:17:07Z

@chaosmaster thank you for the link, but in my opnion this looks very sloppy and hacky. The ideal would be one @component extending another @component

What im unsure about is, what decorator inheritance behavior would be. Override? Extend? Compose?

trotyl · 2018-02-11T15:06:14Z

@avatsaev Higher-Order Components is not a feature, but a code pattern:

Concretely, a higher-order component is a function that takes a component and returns a new component.

The only thing really stop you from doing that is the AOT compiler which does only support top-level classes. The metadata inheritance (overriding) is an independent feature (#13764).

LinboLen · 2018-02-12T08:29:11Z

waiting for compiler cli support

GuskiS · 2018-02-12T08:32:55Z

Is this target for v6.0.0?
Also, will this reduce compile time? (runtime/aot)
Great work, keep it up :)

trotyl · 2018-02-12T08:42:31Z

@GuskiS Will only be available behind a flag (non-default) in v6.
The ~~compile~~ build time would be greatly reduced in bazel tooling(#19058 (comment) for EAP), regardless of using ivy or not.

tmair · 2018-02-13T11:03:54Z

@IgorMinar Just out of curiosity. Do you have any documentation about the design of the new Ivy Renderer that is publicy available?

fknop · 2018-02-13T12:09:34Z

@tmair I asked Rob on Twitter: https://twitter.com/robwormald/status/961727090113396737

Karasuni · 2018-02-14T15:09:44Z

Looking forward to this!

Will ivy allow components to dynamically load html templates as prophecized in #15275?

listepo-alterpost · 2018-02-14T15:21:52Z

Will ivy allow #13764 and #13766 ?

mlc-mlapis · 2018-02-14T15:46:00Z

@Karasuni ... mentioning ivy in #15275 was in another context. We have to wait a bit for final features which ivy brings but it is sure that they are really interesting ... even in the context of using of dynamic ad-hoc components.

HerringtonDarkholme · 2018-02-18T17:33:19Z

@tmair I have a blog post translating answers from @trotyl. It might be helpful to get a rough idea about Ivy.

theodorejb · 2018-02-18T18:13:36Z

@HerringtonDarkholme I found your blog post here: https://herringtondarkholme.github.io/2018/02/19/angular-ivy/. It was very informative - thanks!

sharikovvladislav · 2019-11-07T13:14:04Z

How to get DebugElement in dev build (ng serve) in Ivy?

Previuosly, we could do it with: ng.probe(selector). In Ivy there is no probe method. What is analogue?

sharikovvladislav · 2019-11-07T13:50:03Z

Why do I wonder about DebugElement in dev build?

There are two test outputs below. One is with Ivy enabled. One is with Ivy disabled. Same version: 9.0.0-rc.1.

Ivy disabled:

07 11 2019 16:45:38.713:INFO [Chrome 78.0.3904 (Mac OS X 10.14.6)]: Connected on socket wLxAErGHIZ52HWpWAAAA with id 69969590
LOG: '>> de.attributes', Object{ng-version: '9.0.0-rc.1', tabindex: null}
Chrome 78.0.3904 (Mac OS X 10.14.6): Executed 1 of 2 SUCCESS (0 secs / 0.062 secs)
Chrome 78.0.3904 (Mac OS X 10.14.6): Executed 2 of 2 SUCCESS (0.105 secs / 0.078 secs)
TOTAL: 2 SUCCESS
TOTAL: 2 SUCCESS

Ivy enabled:

07 11 2019 16:44:53.688:INFO [Chrome 78.0.3904 (Mac OS X 10.14.6)]: Connected on socket zalDmgVWKSP5geYKAAAA with id 8272420
LOG: '>> de.attributes', Object{id: 'root-ng-internal-isolated-1', ng-version: '9.0.0-rc.1'}
Chrome 78.0.3904 (Mac OS X 10.14.6): Executed 1 of 2 SUCCESS (0 secs / 0.037 secs)
Chrome 78.0.3904 (Mac OS X 10.14.6) AppComponent debug element FAILED
        Error: Expected undefined to be null. Tip: To check for deep equality, use .toEqual() instead of .toBe().
            at <Jasmine>
            at UserContext.<anonymous> (http://localhost:9877/_karma_webpack_/src/app/app.component.spec.ts:29:36)
            at ZoneDelegate.invoke (http://localhost:9877/_karma_webpack_/node_modules/zone.js/dist/zone-evergreen.js:365:1)
            at ProxyZoneSpec.onInvoke (http://localhost:9877/_karma_webpack_/node_modules/zone.js/dist/zone-testing.js:305:1)
Chrome 78.0.3904 (Mac OS X 10.14.6): Executed 2 of 2 (1 FAILED) (0 secs / 0.129 secs)
Chrome 78.0.3904 (Mac OS X 10.14.6) AppComponent debug element FAILED
        Error: Expected undefined to be null. Tip: To check for deep equality, use .toEqual() instead of .toBe().
            at <Jasmine>
            at UserContext.<anonymous> (http://localhost:9877/_karma_webpack_/src/app/app.component.spec.ts:29:36)
            at ZoneDelegate.invoke (http://localhost:9877/_karma_webpack_/node_modules/zone.js/dist/zone-evergreen.js:365:1)
Chrome 78.0.3904 (Mac OS X 10.14.6): Executed 2 of 2 (1 FAILED) (0.158 secs / 0.129 secs)
TOTAL: 1 FAILED, 1 SUCCESS
TOTAL: 1 FAILED, 1 SUCCESS

Same component, same tests.

The component:

@Component({
  selector: 'example-app',
  template: `
    <button (click)="toggle()">Toggle</button>
  `,
  host: {
    '[attr.tabindex]': 'disabled ? null : 0'
  },
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class AppComponent {
  disabled = false;

  toggle() {
    this.disabled = !this.disabled;
  }
}

The unit test:

  it('debug element', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;

    app.disabled = true;
    fixture.detectChanges();

    const de = fixture.debugElement;
    console.log('>> de.attributes', de.attributes);

    expect(de.attributes.tabindex).toBe(null);
  });

Is it breaking change?

We have some unit tests broken in our project because of that.

I can't find any info in CHANGELOG (I made link for specific version which mensions bugfix about DebugElement) or in Known Issues

Should I start an issue? Or is it something known (issue in this repo, known issues anywhere, changelog) and I just should fix it in my unit tests: null -> undefined?

lucasbasquerotto · 2019-11-07T14:18:35Z

@sharikovvladislav I don't know the reason why Ivy made such a change, being now undefined while it was null previously, but can't you change the condition to accept both null and undefined?

sharikovvladislav · 2019-11-07T14:27:26Z

@lucasbasquerotto of course I can fix some unit tests somehow. The main question is:
Will this changes cause anything bad in development / production build?

Or I just have to change the unit tests and all will be fine.

pkozlowski-opensource · 2019-11-07T14:28:11Z

@sharikovvladislav @lucasbasquerotto could one of you file a separate issue for this particular case? There is a great chance that we are going to miss this case in the long discussion here. Thnx!

sharikovvladislav · 2019-11-07T14:41:01Z

@pkozlowski-opensource Ye, sure. I will do it this evening.

sharikovvladislav · 2019-11-07T22:57:28Z

@pkozlowski-opensource #33672

sharikovvladislav · 2019-11-08T07:53:31Z

Why can't you use JIT in dev build? пт, 8 нояб. 2019 г. в 10:48, Aleš <notifications@github.com>:

…

Is there going to be a more straightforward way to turn Ivy on only for production build, given that it's not quite usable for dev due to rebuild times? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#21706?email_source=notifications&email_token=ABK4V7U7WWDAEEFZG7Q7U63QSUKVNA5CNFSM4ENCAAQ2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEDPAPLY#issuecomment-551421871>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABK4V7XAFKHES6NMH3Z37R3QSUKVNANCNFSM4ENCAAQQ> .

pshurygin · 2019-11-08T09:16:04Z

I think this 20s rebuild time is not typical and is probably caused by some bug, as i'm seeing much faster rebuilds on the app of similar size. Can this probably be related to #33532 or some other typechecking issue?

fxck · 2019-11-08T11:00:21Z

How would I go about debugging it? Basically all of my build times increased, production build went from 8 minutes to 14 minutes.

Why can't you use JIT in dev build?

That's what I'm doing, but then you lose the benefits of template checking etc. As far as I know anyway.

It was my understanding that Ivy was supposed to be the best of both aot and jit combined, that you would finally be able to use it on larger projects without having to resolve to jit (as aot was already unusable for dev on larger projects - a known problem).

vytautas-pranskunas- · 2019-11-08T11:25:20Z

Is it only me who had big belueve in I y but now it looks like it will not be so magical? Or do you think guys that they will show us magic?

fxck · 2019-11-08T11:48:03Z

Ivy is just a groundwork for some highly requested features and I'm fine with that. But still a bit surprised by the build times, was expecting improvements from the get-go here.

naveedahmed1 · 2019-11-08T19:05:26Z

Lighthouse score for Mustakbil.com with Angular 9-RC1 (IVY)
(without any throttling):

Angular 8.x vs Angular 9-next.1 v Angular 9-RC1 (IVY)

1st Contentful Paint: 0.3s > 0.5s >0.3s
Speed Inex: 0.5s > 1.4s > 1s
Time to Interactive: 1.8s > 2.4s > 0.8s

Scripting 1219ms > 1547ms > 552ms
Rendering 458>292 > 145
Painting 100 >63 > 47
System 345 >268 > 271
Idle 302 > 277 > 1002

Bundle sizes:

	8.2.3	  	9.0-RC
Total	12.7mb 	> 	9.71mb
ES2015	6.18mb 	> 	4.57mb
ES5	6.43mb 	> 	5.0mb

In my case production build takes 95 seconds on Angular 9-RC1 (IVY).

vytautas-pranskunas- · 2019-11-08T19:26:13Z

So angular 9 rc1 is without Ivy right?

…

On Fri, Nov 8, 2019, 8:08 PM Naveed Ahmed ***@***.***> wrote: Lighthouse score for Mustakbil.com <https://www.mustakbil.com/> with Angular 9-RC1 (without any throttling): Angular 8.x vs Angular 9-next.1 v Angular 9-RC1 1st Contentful Paint: 0.3s > 0.5s >0.3s Speed Inex: 0.5s > 1.4s > 1s Time to Interactive: 1.8s > 2.4s > 0.8s Scripting 1219ms > 1547ms > 552ms Rendering 458>292 > 145 Painting 100 >63 > 47 System 345 >268 > 271 Idle 302 > 277 > 1002 [image: mustakbil-matrices1] <https://user-images.githubusercontent.com/7761180/68503048-be9aaa80-0283-11ea-8e19-b875e516d519.jpg> — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#21706?email_source=notifications&email_token=AA54ZF5QGYL6YWU7MZ2IY6DQSW2JRA5CNFSM4ENCAAQ2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEDTB3RI#issuecomment-551951813>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AA54ZF652OTQPR54EKCWJHDQSW2JRANCNFSM4ENCAAQQ> .

naveedahmed1 · 2019-11-08T19:28:22Z

@vytautas-pranskunas- Angular 9 rc1 is with Ivy enabled.

vytautas-pranskunas- · 2019-11-08T19:33:35Z

And next is without?

…

On Fri, Nov 8, 2019, 8:30 PM Naveed Ahmed ***@***.***> wrote: @vytautas-pranskunas- <https://github.com/vytautas-pranskunas-> Angular 9 rc1 is with Ivy enabled. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#21706?email_source=notifications&email_token=AA54ZF36ESW35TMNNWBA4PLQSW47BA5CNFSM4ENCAAQ2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEDTDXUY#issuecomment-551959507>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AA54ZF7OVDBTEUXZYZ56SBDQSW47BANCNFSM4ENCAAQQ> .

naveedahmed1 · 2019-11-08T19:43:04Z

Angular 8 without IVY, Angular 9.next and Angular 9.RC both with IVY

vytautas-pranskunas- · 2019-11-08T19:53:36Z

Then why is such a big difference between ng9 next and ng9 rc1?

…

On Fri, Nov 8, 2019, 8:45 PM Naveed Ahmed ***@***.***> wrote: Angular 8 without IVY, Angular 9.next and Angular 9.RC both with IVY — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#21706?email_source=notifications&email_token=AA54ZF3XPCOISKUJC5ZMUOTQSW6WFA5CNFSM4ENCAAQ2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEDTE6XY#issuecomment-551964511>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AA54ZF2WINFN5RXRNISDW3LQSW6WFANCNFSM4ENCAAQQ> .

tayambamwanza · 2019-11-08T22:09:46Z

I remember reading that current ivy is doing backward compatibility, so that's why there's extra size and time, bit as new versions release and libraries fix compatibility they can drop the dead weight so to speak.

albyrock87 · 2019-11-12T10:22:57Z

Hi! A question: will markDirty<T>(component: T) and detectChanges<T>(component: T) be public APIs? As of release 9-rc1 they are not. Thanks

sergey-morenets · 2019-11-12T12:00:19Z

Hi

The same question about renderComponent function. Will it be used in Angular 9? Angular 8 Ivy samples used it for bootstrapping. But I see in new Angular 9-rc-1 application that's absent:

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

Ks89 · 2019-11-12T21:08:51Z

Is Ivy compatible with universal?
I tried to download the example https://next.angular.io/generated/zips/universal/universal.zip and execute ng update @angular/cli @angular/core --next to upgrade to angular 9.
After the upgrade I can run npm run build:ssr && npm run serve:ssr, but when I try to navigate to the main page at localhost:4000 I get this error:

Node server listening on http://localhost:4000
Error: You must pass in a NgModule or NgModuleFactory to be bootstrapped

Do you have any suggestions?

naveedahmed1 · 2019-11-12T22:02:32Z

Yes IVY works fine with SSR/Universal, we're using it on our website without any issue.

fabionolasco · 2020-02-14T14:44:52Z

I just created a Hello World using Angular 9.0.1 (Ivy and AOT with build --prod), with no CSS and no Router. The final size on the browser was 135Kb.

Is that correct?

Thank you for your help!

Log:
chunk {2} polyfills-es2015.442fa3cc45520cc0d518.js (polyfills) 35.6 kB [initial] [rendered]
chunk {3} polyfills-es5.abdd41dcd206a6689f72.js (polyfills-es5) 127 kB [initial] [rendered]
chunk {0} runtime-es2015.0811dcefd377500b5b1a.js (runtime) 1.45 kB [entry] [rendered]
chunk {0} runtime-es5.0811dcefd377500b5b1a.js (runtime) 1.45 kB [entry] [rendered]
chunk {1} main-es2015.c3215eff7b2f311317ff.js (main) 94.6 kB [initial] [rendered]
chunk {1} main-es5.c3215eff7b2f311317ff.js (main) 116 kB [initial] [rendered]
chunk {4} styles.0e4338761429b4eb16ac.css (styles) 0 bytes [initial] [rendered]

jorgellose · 2020-02-14T15:09:37Z

br compression and voila

pkozlowski-opensource · 2020-02-14T15:13:13Z

Given that ivy landed as a default renderer in v9, it is time to close this issue :-)

angular-automatic-lock-bot · 2020-03-16T16:09:05Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

IgorMinar added this to the v6.0 milestone Jan 22, 2018

IgorMinar assigned mhevery Jan 22, 2018

angular deleted a comment from IgorMinar Jan 23, 2018

mhevery added comp: ivy feature Issue that requests a new feature labels Jan 24, 2018

angular deleted a comment from LinboLen Jan 26, 2018

angular deleted a comment from arjunyel Jan 26, 2018

ocombe mentioned this issue Feb 6, 2018

i18n: Able to use translation strings outside a template #11405

Closed

sorrycc mentioned this issue Feb 8, 2018

早报 @ 2018.2.9 sorrycc/zaobao#16

Open

sharikovvladislav mentioned this issue Nov 7, 2019

minimal renderComponent Ivy app cannot be found by Protractor #28449

Closed

pkozlowski-opensource closed this as completed Feb 14, 2020

angular-automatic-lock-bot bot locked and limited conversation to collaborators Mar 16, 2020

Ivy Renderer (beta) #21706

Ivy Renderer (beta) #21706

Comments

IgorMinar commented Jan 22, 2018 • edited by mhevery

Overview

ansarizafar commented Feb 8, 2018

AhsanAyaz commented Feb 8, 2018

AndreaBarbasso commented Feb 8, 2018

avatsaev commented Feb 8, 2018 • edited

Ploppy3 commented Feb 8, 2018 • edited

chaosmonster commented Feb 8, 2018

trotyl commented Feb 11, 2018 • edited

chaosmonster commented Feb 11, 2018

trotyl commented Feb 11, 2018 • edited

avatsaev commented Feb 11, 2018 • edited

trotyl commented Feb 11, 2018

LinboLen commented Feb 12, 2018

GuskiS commented Feb 12, 2018

trotyl commented Feb 12, 2018 • edited

tmair commented Feb 13, 2018

fknop commented Feb 13, 2018

Karasuni commented Feb 14, 2018

listepo-alterpost commented Feb 14, 2018

mlc-mlapis commented Feb 14, 2018 • edited

HerringtonDarkholme commented Feb 18, 2018

theodorejb commented Feb 18, 2018

sharikovvladislav commented Nov 7, 2019 • edited

sharikovvladislav commented Nov 7, 2019 • edited

lucasbasquerotto commented Nov 7, 2019

sharikovvladislav commented Nov 7, 2019

pkozlowski-opensource commented Nov 7, 2019

sharikovvladislav commented Nov 7, 2019

sharikovvladislav commented Nov 7, 2019

sharikovvladislav commented Nov 8, 2019 via email

pshurygin commented Nov 8, 2019

fxck commented Nov 8, 2019 • edited

vytautas-pranskunas- commented Nov 8, 2019

fxck commented Nov 8, 2019

naveedahmed1 commented Nov 8, 2019 • edited

vytautas-pranskunas- commented Nov 8, 2019 via email

naveedahmed1 commented Nov 8, 2019

vytautas-pranskunas- commented Nov 8, 2019 via email

naveedahmed1 commented Nov 8, 2019

vytautas-pranskunas- commented Nov 8, 2019 via email

tayambamwanza commented Nov 8, 2019

albyrock87 commented Nov 12, 2019 • edited

sergey-morenets commented Nov 12, 2019 • edited

Ks89 commented Nov 12, 2019 • edited

naveedahmed1 commented Nov 12, 2019

fabionolasco commented Feb 14, 2020

jorgellose commented Feb 14, 2020

pkozlowski-opensource commented Feb 14, 2020

angular-automatic-lock-bot bot commented Mar 16, 2020

IgorMinar commented Jan 22, 2018 •

edited by mhevery

avatsaev commented Feb 8, 2018 •

edited

Ploppy3 commented Feb 8, 2018 •

edited

trotyl commented Feb 11, 2018 •

edited

trotyl commented Feb 11, 2018 •

edited

avatsaev commented Feb 11, 2018 •

edited

trotyl commented Feb 12, 2018 •

edited

mlc-mlapis commented Feb 14, 2018 •

edited

sharikovvladislav commented Nov 7, 2019 •

edited

sharikovvladislav commented Nov 7, 2019 •

edited

fxck commented Nov 8, 2019 •

edited

naveedahmed1 commented Nov 8, 2019 •

edited

albyrock87 commented Nov 12, 2019 •

edited

sergey-morenets commented Nov 12, 2019 •

edited

Ks89 commented Nov 12, 2019 •

edited