ModuleWithProviders now takes a template arguments <T> in angular 10,

[erossignon]

Date: 2020-07-23T22:01:56.605Z - Hash: 91eb1069bf5298af4ef2 - Time: 43029ms
ERROR in node_modules/ngx-echarts/lib/ngx-echarts.module.d.ts:4:47 - error TS2314: Generic type 'ModuleWithProviders' requires 1 type argument(s).
4 static forRoot(config: NgxEchartsConfig): ModuleWithProviders;

https://v9.angular.io/api/core/ModuleWithProviders#providers
https://v10.angular.io/api/core/ModuleWithProviders#providers

[gkalpak]

For reference, we also run it on our ngcc-validation repo while updating to v5.1.0: angular/ngcc-validation#1606
Here is an example of a failing CI job.

---

To add some more info on the ModuleWithProviders change:
With PR angular/angular#36963, the type argument was made mandatory for ModuleWithProviders. (This was documented as a breaking change in angular/angular#37121.)

Using ModuleWithProviders without a type argument in ngx-echarts.module.ts causes a build error when building against Angular v10.

To avoid the build error, you must pass a type argument to ModuleWithProviders (e.g. ModuleWithProviders<NgxEchartsModule>).

[ciukstar]

Same error after upgrading from ngx-echarts@5.0.0 to ngx-echarts@5.1.0:

ERROR in node_modules/ngx-echarts/lib/ngx-echarts.module.d.ts:4:47 - error TS2314: Generic type 'ModuleWithProviders<T>' requires 1 type argument(s).

4     static forRoot(config: NgxEchartsConfig): ModuleWithProviders;
                                                ~~~~~~~~~~~~~~~~~~~

$ ng version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 10.0.4
Node: 14.5.0
OS: linux x64

Angular: 10.0.5
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.1000.4
@angular-devkit/build-angular     0.1000.4
@angular-devkit/build-optimizer   0.1000.4
@angular-devkit/build-webpack     0.1000.4
@angular-devkit/core              10.0.4
@angular-devkit/schematics        10.0.4
@angular/cdk                      10.1.0
@angular/cli                      10.0.4
@angular/flex-layout              10.0.0-beta.32
@angular/material                 10.1.0
@ngtools/webpack                  10.0.4
@schematics/angular               10.0.4
@schematics/update                0.1000.4
rxjs                              6.6.0
typescript                        3.9.7
webpack                           4.43.0

[gkalpak]

BTW, this might (or might not) be is related to the fact that in version 5.1.0 some ngcc (the Angular Compatibility Compiler) compilation artifacts are shipped to npm (e.g. the __ivy_ngcc__ directory and .__ivy_ngcc_bck files). These are not supposed to be shipped to npm.

[gkalpak]

Taking a closer look, this seems to be indeed caused by the fact that these ngcc artifacts are shipped to npm.

More specifically, ngcc is normally able to fix the typings of a simplae function return ModuleWithProviders (i.e. it is able to add the missing type argument). However, the fact that lib/ngx-echarts.module.d.ts.__ivy_ngcc_bak is shipped to npm prevents ngcc from updating lib/ngx-echarts.module.d.ts and fixing the type.

Getting rid of the ngcc artifacts before publishing to npm should fix this.

This comment explains how to fix the same issue in a different library and seems apply here as well.

[F0rt1s]

I can confirm: Deleting the ngcc artifacts from the node_modules/ngx-echarts folder fixes the issues.

[ciukstar]

I can confirm: Deleting the ngcc artifacts from the node_modules/ngx-echarts folder fixes the issues.

Hello. What steps should I follow in order to fix this issue? I have $ rm -rf node_modules package-lock.json and $ npm install, without success. Also I $ rm -rf node_modules/ngx-echarts/__ivy_ngcc__/ && $ rm -rf node_modules/ngx-echarts/ngx-echarts.d.ts.__ivy_ngcc_bak. Still getting the same error:

ERROR in node_modules/ngx-echarts/lib/ngx-echarts.module.d.ts:4:47 - error TS2314: Generic type 'ModuleWithProviders<T>' requires 1 type argument(s).

4     static forRoot(config: NgxEchartsConfig): ModuleWithProviders;
                                                ~~~~~~~~~~~~~~~~~~~

Thanks.

[gkalpak]

You need to remove all .__ivy_ngcc_bak files (e.g. node_modules/ngx-echarts/lib/ngx-echarts.module.d.ts.__ivy_ngcc_bak).

[Karamuto]

Returning to Version 5.0.0 has currently solved the issue for me...

I guess we have to wait until a fix version for this is released, the other solution here come by too hacky for a production build.

[smnbbrv]

Probably the wrong ng-package.json file was used for publishing. There are two files:

• https://github.com/xieziyu/ngx-echarts/blob/master/projects/ngx-echarts/ng-package.json
• https://github.com/xieziyu/ngx-echarts/blob/master/projects/ngx-echarts/ng-package.prod.json

The first one is exactly the one that can cause issue that @gkalpak is pointing to:

ngx-echarts/projects/ngx-echarts/ng-package.json

Line 4 in b5ab51a

"deleteDestPath": false,

The latter file does not have this line.

This is just an assumption... Normally I would already make a PR, but it's unclear what is the intention behind all this and whether there is something to fix at all.

@xieziyu we need some of your precious time, please :)

[ambu50]

I had to downgrade my angular to 9.1.12

[olicooper]

Can the type argument be added to the module instead? It has been depreciated since Angular 9 anyway https://angular.io/guide/migration-module-with-providers

[gkalpak]

The problem is not the type. The problem is that the latest deployed version contains artifacts that it should not, which is turn prevents the Angular Compatibility Compiler from doing its work. See #250 (comment).