ng serve 后无法解析 NgxGalleryPreviewComponent 的所有参数

Question

I recently updated my angular project from version 8 to 9 and have been experiencing the above mentioned issue. My project makes use of ngx-gallery and after the update to angular 9, I updated all references to the deprecated Renderer service to Renderer2 inside ngx-gallery-helper.service.d.ts and ngx-gallery-preview.component.d.ts .

My currently installed version of npx-gallery is the latest one (5.10.0). When I run ng serve the home page doesn't even load, I get the following error in the console:

Uncaught Error: Can't resolve all parameters for NgxGalleryPreviewComponent: ([object Object], [object Object], [object Object], ?, [object Object]).
    at syntaxError (compiler.js:2281)
    at CompileMetadataResolver._getDependenciesMetadata (compiler.js:21063)
    at CompileMetadataResolver._getTypeMetadata (compiler.js:20958)
    at CompileMetadataResolver.getNonNormalizedDirectiveMetadata (compiler.js:20573)
    at CompileMetadataResolver.loadDirectiveMetadata (compiler.js:20437)
    at compiler.js:26467
    at Array.forEach (<anonymous>)
    at compiler.js:26466
    at Array.forEach (<anonymous>)
    at JitCompiler._loadModules (compiler.js:26463)

Running ng --version inside my project root folder outputs the following:

Angular CLI: 9.0.1
Node: 12.8.0

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

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.900.1
@angular-devkit/build-angular      0.900.1
@angular-devkit/build-optimizer    0.900.1
@angular-devkit/build-webpack      0.900.1
@angular-devkit/core               9.0.1
@angular-devkit/schematics         9.0.1
@angular/cli                       9.0.1
@angular/flex-layout               9.0.0-beta.29
@angular/material-moment-adapter   8.2.3
@ngtools/webpack                   9.0.1
@schematics/angular                9.0.1
@schematics/update                 0.900.1
rxjs                               6.5.4
typescript                         3.7.5
webpack                            4.41.2

What am I missing? Your help would be greatly appreciated. Thank you.

Answer 1

Files "ngx-gallery-helper.service.d.ts" and "ngx-gallery-preview.component.d.ts" are inside folder node_modules. Node_modules generated automatically with npm. No changes inside folder 'node_modules' possible. It will be recreated with npm.

Solution of bug must be not very hard. As usual. Change "Renderer" -> "Renderer2" and related items. But really big problem - this gallery in repository and only author of ngx-gallery has got access.

What can be done:

• Trigger author of https://www.npmjs.com/package/ngx-gallery . Ask him to fix bug and push fix into repository.
• Move gallery from repository to local module and fix bug. Before this better to try fix files "ngx-gallery-helper.service.d.ts" and "ngx-gallery-preview.component.d.ts" in "node_modules" by hands and look if problem was gone. Just for test.
• Rewrite "ngx-gallery-helper.service.d.ts" and "ngx-gallery-preview.component.d.ts" in your app. But future possible update of ngx-gallery will cause problems.
• Use other gallery or write your own.

BTW https://github.com/thatisuday/ngx-image-gallery works well with Angular 9. Just checked. And good customisation.