Looking forward for an early release.

Super excited for this 👍 😄

@ContentChildred

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

I want higher order components 😄

hope Component Composition will land in the 6

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.

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

@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.

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

@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.

@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?

@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).

waiting for compiler cli support

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

@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.

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

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

Looking forward to this!

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

Will ivy allow #13764 and #13766 ?

@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.

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

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

Ivy looks awesome thank you. Been playing with it and instead of me finding why my vendor file was bloated by 8MB, Ivy fixed it and brought it right down to 2MB. So thank you. Just a note, it does not work with Universal. (I know Ivy is still in Beta, hence not logging an issue)

If you use the universal starter here or follow the guide here. Upgrade to Angular 7.1.4 and run

Enable Ivy in the tsconfig

"angularCompilerOptions": {
  "enableIvy": true
} 

Then run
ng run angular.io-example:server

You get:

ERROR in : Template parse errors:
The pipe 'uppercase' could not be found ("<div *ngIf="hero">
  <h2>{{ [ERROR ->]hero.name | uppercase }} Details</h2>
  <div><span>id: </span>{{hero.id}}</div>
  <div>
"): ~/universal/src/app/hero-detail/hero-detail.component.html@1:9

In my personal project I don't get the same error instead I get:

ERROR in ./src/main.server.ts
Module not found: Error: Can't resolve './app/app.server.module.ngfactory'

Remove the EnableIvy flag and everything works as it should.

Hi @jan1za

I tried to test Ivy compiler today with Angular 7.1.4 and I got an error.
The pipe 'translate' could not be found.

Pipe 'translate' is from @ngx-translate/core dependency. I don't use Universal.

Hi @jan1za

I tried to test Ivy compiler today with Angular 7.1.4 and I got an error.
The pipe 'translate' could not be found.

Pipe 'translate' is from @ngx-translate/core dependency. I don't use Universal.

I'm not sure we should be doing this here, but here you go:

run node_modules/.bin/ivy-ngcc first

I wonder what's the current state of Ivy? It's been few months since https://twitter.com/stephenfluin/status/1045330203730358273, how's the verification on google apps going?

@fxck you can look here
https://github.com/angular/angular/pulls?utf8=%E2%9C%93&q=is%3Apr+label%3A%22comp%3A+ivy%22
and search for remaining fixmeIvy in angular tests

@artaommahe Following your idea, I cloned the repo, searched for fixmeIvy and found 135 of them.

9 days update:

There are now 52 fixmeIvy(...) tests left to fix.
I now count only the actual tests (previously I forgot to subtract the imports which resulted in a higher number by ~33%),

30 fixmeIvy(...) tests left

Does this reflect the actual state of Ivy though? :)

It might not, but it is the best publicly available measurement, STATUS.md wasn't updated for 2 months, also Igor Minar at Angular NYC said that the current plan is optional Ivy in 8.0 and default in 9.0
Latest Ivy info https://www.youtube.com/watch?v=a3j5U5WVmUo

Will Angular CLI 8 provide support for Ivy, or is the current angularCompilerOption flag sufficient?

Looking forward to test our projects against Ivy without custom setup and with the node_modules support.

@dirkluijk As far as I know, the current version of Angular/CLI already supports Ivy.

🡒 If you want to create a new Ivy project, just add --experimentalIvy=true to the new command.

🡒 If you want to migrate an existing project, you will have to do a few things:
(Back up your project before your attempt this, it was only tested on an empty project)

• Add this to your tsconfig.app.json

  "angularCompilerOptions": {
    "enableIvy": "ngtsc"
  }

• Replace maint.ts file to:

import { AppComponent } from './app/app.component';
import { ɵrenderComponent as renderComponent } from '@angular/core';

renderComponent(AppComponent);

• Remove the browser module from your app's app.module.ts

• Serve with AOT ng serve --aot

Empty project comparison

Current renderer - Hot build:

Ivy - Hot build:

Comparison:

• Build time reduction ~17%
• main.js size reduction: ~75%

32 fixmeIvy(...) tests left

Thanks. I remember last time I checked I has issues with change detection (because of renderComponent) and with usage of @angular/common. I will give it a new shot.

@dirkluijk Thanks! Any idea what to do with the AppModule? When I remove bootstrapping of the AppModule and instead call renderComponent(AppComponent), how will the application then know about the AppModule?

I get

ERROR in could not resolve foreign function declaration: /Users/lrj/project/ivytest/src/app/app.module.ts forRoot

when trying it. Note that I am migrating a current project.. I'll try creating an empty project to see how to code structuring of the AppModule is

Some news from Stephen Fluin here:
“A plan for version 8.0 and Ivy” https://link.medium.com/Pw7kfqgdaU

@dirkluijk Thanks! Any idea what to do with the AppModule? When I remove bootstrapping of the AppModule and instead call renderComponent(AppComponent), how will the application then know about the AppModule?

I get

ERROR in could not resolve foreign function declaration: /Users/lrj/project/ivytest/src/app/app.module.ts forRoot

when trying it. Note that I am migrating a current project.. I'll try creating an empty project to see how to code structuring of the AppModule is

run in terminal ./node_modules/.bin/ivy-ngcc

Is Ivy a standalone library that will be used with angular cli. Or is it a angular development ?

If it's standalone, can you share the link for the original site. I like to understand the basics, before knowing how angular applies them.

https://blog.nrwl.io/understanding-angular-ivy-incremental-dom-and-virtual-dom-243be844bf36
https://blog.angularindepth.com/inside-ivy-exploring-the-new-angular-compiler-ebf85141cee1
https://herringtondarkholme.github.io/2018/02/19/angular-ivy/

All three articles work great to deepen my understanding of IVY, thanks a lot @fxck !

Update 27.03.2019 (8.0.0-beta.10)

Only one issue in material with Ivy and 0 fixmeIvy in this repo 🎉🎉🎉

Update 13.03.2019 (8.0.0-beta.8)

Number of errors in Materal went down to 50
and only 2 (the same) fixmeIvy in repo
13.03.2019 (8.0.0-beta.8)

Update 06.03.2019

Number of errors in Materal went down to 80

Update 26.02.2019

looks like there is 185 errors in material when running with Ivy

26.02.2019

16.02.2019 (8.0.0-beta.4)

14.02.2019

Anyone interested in trying Ivy out can look at the following documentation: https://github.com/angular/angular/blob/master/aio/content/guide/ivy.md

https://next.angular.io/guide/ivy

I finally managed to build one of my projects with the new ivy compiler.

I got a 6% size increase...

Ivy Project v8.0.0-beta.9 - 1006.39 kB

Date: 2019-03-24T20:29:13.388Z
Hash: 32355ef0d4bc534b03da
Time: 54906ms
chunk {0} runtime.f67000390ffa9469852f.js (runtime) 2.19 kB [entry] [rendered]
chunk {1} 1.57864db9068eebbadfa6.js () 102 kB  [rendered]
chunk {2} main.b409a0e41368a702fb6c.js (main) 682 kB [initial] [rendered]
chunk {3} polyfills.1d27c8791041e9f0f9ff.js (polyfills) 42.5 kB [initial] [rendered]
chunk {4} styles.86a6d4fef07e44867ffb.css (styles) 61.7 kB [initial] [rendered]
chunk {5} 5.877fbdf57cf970560818.js () 116 kB  [rendered]

Standard Project v7.2.9 - 945.39 kB

Date: 2019-03-24T20:41:10.892Z
Hash: 87233f693370c449eea4
Time: 58804ms
chunk {0} runtime.7048c58a50745468f435.js (runtime) 2.19 kB [entry] [rendered]
chunk {1} 1.330546089afa34020c44.js () 97.2 kB  [rendered]
chunk {2} main.e8cb1b64c7c036fd7c91.js (main) 568 kB [initial] [rendered]
chunk {3} polyfills.639a92ec3f518e7dc928.js (polyfills) 41 kB [initial] [rendered]
chunk {4} styles.c28efc9d06ce9d8d340c.css (styles) 61.7 kB [initial] [rendered]
chunk {5} 5.179b01322dcdae88f51c.js () 99 kB  [rendered]
chunk {6} 6.1d41a2e37f9d1b2c0260.js () 76.3 kB  [rendered]

I'll try it out with a clean project, see how things fare there.

Update

Okay, clearly there's a bug somewhere, either in the CLI or Compiler.

I've created two new projects using @angular/cli@v8.0.0-beta.8.

Ivy Project (ng new shiny-ivy-app --enable-ivy):

Date: 2019-03-24T20:57:40.474Z
Hash: 9af12cf21e3f142096e6
Time: 13185ms
chunk {main} main.js, main.js.map (main) 10.4 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 236 kB [initial] [rendered]
chunk {polyfills.es5} polyfills.es5.js, polyfills.es5.js.map (polyfills.es5) 305 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.08 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 16.7 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.66 MB [initial] [rendered]

Standard Project (ng new rusty-non-ivy-app):

Date: 2019-03-24T20:57:43.883Z
Hash: 4957181539cbfe09de12
Time: 12329ms
chunk {main} main.js, main.js.map (main) 10.4 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 236 kB [initial] [rendered]
chunk {polyfills.es5} polyfills.es5.js, polyfills.es5.js.map (polyfills.es5) 305 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.08 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 16.7 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.6 MB [initial] [rendered]

@vladjerca I have already done that for you here angular/angular-cli#13922 :)

@mohammedzamakhan

Didn't see the issue, good to know it's being tracked. What's really funny to me, is that my existing project, that actually has a bit of logic ends up totaling ~ 1mB.

But with a completely new project setup, both ivy and non-ivy builds end up in totaling ~ 4mB. That's a really strange outcome, can't imagine what's going on behind the scenes 😬

@vladjerca when I build projects created using v8 CLI, I didn't see the vendor.js being created. How did that create for you?

@mohammedzamakhan I have no idea. I did nothing special, really. I just created a new app with the --enable-ivy flag.

But keep in mind I am using the latest beta packages. beta8 for the cli and beta9 for angular.

Hi

How should I provide my services if I use rendering AppComponent not bootstrapping AppModule?

renderComponent(AppComponent);

The only working solution for me is to create injector explicitly

const injector = Injector.create({
    providers: [
        { provide: HttpClient, deps: [HttpHandler] },
        { provide: HttpHandler, useValue: new HttpXhrBackend({ build: () => new XMLHttpRequest }) },
    ],
});

and pass it to renderComponent:

renderComponent(AppComponent, { injector: injector});

However it doesn't make sense to me as I have to reproduce all the providers that were already specified in my modules.