Angular 11 issue: Can't import the named export 'ChangeDetectorRef' from non EcmaScript module (only default export is available)

[jdavidhermoso]

Hi, @wittlock

Thanks for this package and all the work it implies.

I'm installing it in a Angular 11 project, and I'm getting the following issues, so the project does not build.

Does someone know how to make this library work with Angular 11?

I created a repo containing a brand new Angular 11 project (so no side issues related). It's clean 100%. It only containes a new Angular project and ngx-image-zoom imported in app.module.ts.

And this is the error I'm getting on build.

This is the repo: https://github.com/jdavidhermoso/issue-ngx-image-zoom

Thanks so much!

Error: node_modules/ngx-image-zoom/lib/ngx-image-zoom.component.d.ts:120:21 - error TS2694: Namespace '"dev/ngx-image-zoom-issue/node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDeclaration'.

120     static ɵfac: i0.ɵɵFactoryDeclaration<NgxImageZoomComponent, never>;
                        ~~~~~~~~~~~~~~~~~~~~
Error: node_modules/ngx-image-zoom/lib/ngx-image-zoom.component.d.ts:121:21 - error TS2694: Namespace '"dev/ngx-image-zoom-issue/node_modules/@angular/core/core"' has no exported member 'ɵɵComponentDeclaration'.

121     static ɵcmp: i0.ɵɵComponentDeclaration<NgxImageZoomComponent, "lib-ngx-image-zoom", never, { "setThumbImage": "thumbImage"; "setFullImage": "fullImage"; "setZoomMode": "zoomMode"; "setMagnification": "magnification"; "setMinZoomRatio": "minZoomRatio"; "setMaxZoomRatio": "maxZoomRatio"; "setScrollStepSize": "scrollStepSize"; "setEnableLens": "enableLens"; "setLensWidth": "lensWidth"; "setLensHeight": "lensHeight"; "setCircularLens": "circularLens"; "setEnableScrollZoom": "enableScrollZoom"; "altText": "altText"; "titleText": "titleText"; }, { "zoomScroll": "zoomScroll"; "zoomPosition": "zoomPosition"; "imagesLoaded": "imagesLoaded"; }, never, never>;
                        ~~~~~~~~~~~~~~~~~~~~~~

Error: node_modules/ngx-image-zoom/lib/ngx-image-zoom.module.d.ts:5:21 - error TS2694: Namespace '"dev/ngx-image-zoom-issue/node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDeclaration'.

5     static ɵfac: i0.ɵɵFactoryDeclaration<NgxImageZoomModule, never>;`

[wittlock]

Hi, I think there were some breaking changes between angular 9 and 13 which is the lift I did between 0.6.0 and 1.0.0 - I don't really remember the specifics but you could try running 0.6.0 of the library instead. Otherwise your best bet is probably to upgrade your project to newer angular.

I don't really have the capacity to keep the library working with both latest angular and older ones. So I'll focus on it working nicely with the later versions.

Sorry that I don't have a better answer for you but hopefully downgrading to 0.6.0 will work for you.

[jdavidhermoso]

Hi, @wittlock .

Thanks so much for answering.

I'll try to do so. :)

And again, thanks for all the work with the library.

[jdavidhermoso]

@wittlock

Is there a way to invite you to a coffe, at least?

Thanks!

[wittlock]

Glad this got resolved (apparently I forgot to respond). I don't have a tip jar set up, I'm just happy to share this library with the world even though I don't put too much time into it these days. Closing this as its resolved.