Ng-zorro-antd: It doesn't support angular ivy mode

[justwalk]

What problem does this feature solve?

it can use angular ivy mode to improve application performance.

What does the proposed API look like?

Ng-zorro cannot compile through ivy mode because date-fns does not support Angular Package Format。

[wendellhu95]

@wenqi73 Would you please take a look at this? Be aware of potentional breaking changes.

[lppedd]

@wendzhue this is the same problem I had seen weeks ago when the beta started.
The date-fns problem is resolved since (if I recall correctly) beta-4.
However it would still be impossible to compile with Ivy, given you have extending components (lets call them "mixins").

Anyway, @justwalk there is settings file named ngcc.config.js for this kinda problems.

[Svetomechc]

@justwalk https://github.com/NG-ZORRO/ng-zorro-antd/issues/3514#issuecomment-499101370 blocking issues in Angular sadly for Ivy support to happen now

[Svetomechc]

@lppedd you can try compiling with Ivy enabled now with Angular version 9.0.0-rc.1. Haven't tested it myself yet, but all the blocking issues seem to be closed now.

[lppedd]

@Svetomechc oh ok. Thanks! Even the base classes decorators has been solved?

[Svetomechc]

@lppedd I hope.

[lppedd]

@Svetomechc I haven't seen commits about that here, but I'll try anyway.

[Svetomechc]

@lppedd have you had any success?

[vthinkxie]

https://github.com/angular/angular/issues/33393 there is still some issue related to ivy
we will start our work to migrate to ivy after 8.5.1 version

[Svetomechc]

@vthinkxie added thumbs up to the issue, hope it gets resolved ASAP.
Forcing every ng-zorro-antd to switch to Observables everywhere is clearly not an option.

[lppedd]

@Svetomechc that issue is now on v9-blockers, so it will get solved pretty fast I hope!

[marcus-sa]

I'm pretty much just waiting for this, since we've switched over to Bazel and this is blocking us from getting any further.
LMK if you need help with anything.

[wendellhu95]

Closed by #4453. We would release a beta version that supports Ivy shortly after. Thanks for your patience and waiting. :heart:

[marcus-sa]

Awesome! I just finished integrating view engine.. guess I'm gonna go back to Ivy again then, cheers!

[marcus-sa]

Seems like that didn't resolve the issue :sweat_smile:

Error: Error on worker #8: Error: Unable to write a reference to NzStringTemplateOutletDirective node_modules/ng-zorro-antd/esm2015/core/addon/string_template_outlet.js from node_modules/ng-zorro-antd/esm2015/core/addon/addon.module.js

[wendellhu95]

@marcus-sa Have you tried to remove node_modules and reinstall? Usually this problem comes from an outdated version of @angular/cdk.

[Svetomechc]

@marcus-sa I succesfully enabled Ivy with ng-zorro-antd, ping me if you need any help.

[Svetomechc]

@marcus-sa make sure you updated angular, zone.js, typescript, etc.:

make sure you have this line in angular.json:

not sure if this is still needed, but here's my tsconfig.app.json:

delete your package-lock.json / yarn.lock files, remove node_modules directory, run npm i / yarn commands

then your app should run smoothly (first run will take longer to compile. as it will compile your node_modules packages to new format)

[marcus-sa]

@Svetomechc thanks, but it's weird because I have the exact same versions of the packages installed and it still doesn't work.
The last two steps aren't needed for me since I use Bazel :smile:

EDIT:
Works fine when compiling a newly created project using Webpack, but when using ngcc it just fails completely.

[sleekcoda]

@marcus-sa make sure you updated angular, zone.js, typescript, etc.:

make sure you have this line in angular.json:

not sure if this is still needed, but here's my tsconfig.app.json:

delete your package-lock.json / yarn.lock files, remove node_modules directory, run npm i / yarn commands

then your app should run smoothly (first run will take longer to compile. as it will compile your node_modules packages to new format)

Worked like charm all I did was to follow the official documentation of upgrading to angular 9 here

[marcus-sa]

It no longer works with @angular/[email protected]
When running ngcc --properties es2015 main it seems to only compile these entry points:

Compiling ng-zorro-antd/core/addon : main as umd
Compiling ng-zorro-antd/core/addon : es2015 as esm2015
Compiling ng-zorro-antd/version : main as umd
Compiling ng-zorro-antd/version : es2015 as esm2015

Which results in the following error when trying to import NgZorroAntdModule:

node_modules/ng-zorro-antd/ng-zorro-antd.module.d.ts:72:22 - error NG6003: Appears in the NgModule.exports of SharedModule, but could not be resolved to an NgModule, Component, Directive, or Pipe class

72 export declare class NgZorroAntdModule {
                        ~~~~~~~~~~~~~~~~~

[vthinkxie]

Hi all, we are working on the ng-zorro-antd v9 now.

anyone who has interest please follow this issue https://github.com/NG-ZORRO/ng-zorro-antd/issues/4634

I believe it would release soon after the angular v9 final version.

[zmzimpl]

The problem still exis when ngcc, it will thrown an error like this:

Tried to overwrite E:/Project/MstDashboard/node_modules/ng-zorro-antd/esm5/core/addon/classlist_add.js.__ivy_ngcc_bak with an ngcc back up file, which is disallowed.

but it could be solved by delete node_modules and then reinstall

[BrsJsk]

It's not still safe to use ng zorro with angular 9 ?

[hsuanxyz]

It's not still safe to use ng zorro with angular 9 ?

We will release stable version(9.0.0) today

[Svitra]

It's not still safe to use ng zorro with angular 9 ?

We will release stable version(9.0.0) today

Hi, with the version 9 and Angular 9 (ivy enabled) I am now getting the following error:
Error: Tried to write .../node_modules/ng-zorro-antd/core/no-animation/nz-no-animation.directive.d.ts.__ivy_ngcc_bak with an ngcc back up file but it already exists so not writing, nor backing up, .../node_modules/ng-zorro-antd/core/no-animation/nz-no-animation.directive.d.ts.
This error may be because two or more entry-points overlap and ngcc has been asked to process some files more than once.
You should check other entry-points in this package and set up a config to ignore any that you are not using.

And then I get a bunch of other errors all related to nz-no-animation.directive.js

I tried removing node_modules folder and running a clean install but when i run ngcc i get the same result. That is a really big blocker for me. Can you please advise?

[BrsJsk]

It's not still safe to use ng zorro with angular 9 ?

We will release stable version(9.0.0) today

Hi, with the version 9 and Angular 9 (ivy enabled) I am now getting the following error:
Error: Tried to write .../node_modules/ng-zorro-antd/core/no-animation/nz-no-animation.directive.d.ts.__ivy_ngcc_bak with an ngcc back up file but it already exists so not writing, nor backing up, .../node_modules/ng-zorro-antd/core/no-animation/nz-no-animation.directive.d.ts.
This error may be because two or more entry-points overlap and ngcc has been asked to process some files more than once.
You should check other entry-points in this package and set up a config to ignore any that you are not using.

And then I get a bunch of other errors all related to nz-no-animation.directive.js

I tried removing node_modules folder and running a clean install but when i run ngcc i get the same result. That is a really big blocker for me. Can you please advise?

Is ngcc required to run? I think its more of a good thing to do for faster build time ?

[Svitra]

Unfortunately I get the same errors also during build and running unit tests while the dependencies are compiled so despite the unit tests passing the pipelines are failing due to these errors.

[hsuanxyz]

@Svitra @BrsJsk #5045, we will fix it soon

[zmzimpl]

@Svitra @BrsJsk #5045, we will fix it soon

Has the problem been solved? This error is still thrown when I run ngcc after upgrading to 9：
Error on worker #5: Error: Tried to overwrite E:/Project/MstDashboard/node_modules/ng-zorro-antd/core/no-animation/nz-no-animation.directive.d.ts.__ivy_ngcc_bak with an ngcc back up file, which is disallowed.

[hsuanxyz]

@zmzimpl It will be fixed in the next version(9.0.2), you can subscribe to the release notifications

[zmzimpl]

@zmzimpl It will be fixed in the next version(9.0.2), you can subscribe to the release notifications

OK，thanks，It also seems to throw this error：
Error: Error on worker #2: Error: Tried to overwrite E:/Project/MstDashboard/node_modules/ng-zorro-antd/fesm2015/ng-zorro-antd-icon.js.__ivy_ngcc_bak with an ngcc back up file, which is disallowed.

[hsuanxyz]

@zmzimpl Looks like a common error on ivy, could you delete the node_modules and retry?

[zmzimpl]

@zmzimpl Looks like a common error on ivy, could you delete the node_modules and retry?

I tried deleting node_modules, but it still throw this error. At this time, my angular / cli version is9.1.1. When I roll back the antd version to 8.5.2, it will throw There was an error related to addon, but inangular cli 9.0.4, after deleting node_modules and reinstalling it, ivy works fine again.