Angular 10 compatibility
Closed this issue · 18 comments
Hi, does this module work with angular 10? I have tried to get it working but I am getting errors when I run it
ERROR Error: inject() must be called from an injection context
at injectInjectorOnly (core.js:934)
at ɵɵinject (core.js:950)
at Module.ɵɵdirectiveInject (core.js:21113)
at NodeInjectorFactory.NgxImageZoomComponent_Factory [as factory] (ngx-image-zoom.js:315)
at getNodeInjectable (core.js:4274)
at instantiateAllDirectives (core.js:8110)
at createDirectivesInstances (core.js:7484)
at ɵɵelementStart (core.js:14811)
at Module.ɵɵelement (core.js:14862)
at ImageViewComponent_Template
Works for me on Angular 11, FYI.
I have an issue with install of ngx-image-zoom for Angular 11, node -v 15.6.0
npm i ngx-image-zoom
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: winafar@11.0.0
npm ERR! Found: @angular/common@11.1.0
npm ERR! node_modules/@angular/common
npm ERR! @angular/common@"~11.1.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/common@"^9.0.1" from ngx-image-zoom@0.6.0
npm ERR! node_modules/ngx-image-zoom
npm ERR! ngx-image-zoom@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
Do someone know how it could be resolved?
Same as @krupnik-m could you migrate your lib to Angular 10 and 11?
`
npm install ngx-image-zoom --save
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: rrcrypto@0.0.0
npm ERR! Found: @angular/common@10.2.4
npm ERR! node_modules/@angular/common
npm ERR! @angular/common@"^10.2.4" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/common@"^9.0.1" from ngx-image-zoom@0.6.0
npm ERR! node_modules/ngx-image-zoom
npm ERR! ngx-image-zoom@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See AppData\Local\npm-cache\eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! AppData\Local\npm-cache_logs\2021-03-11T14_42_45_128Z-debug.log
`
@siovene Could you please confirm the npm version you are using? I'm facing a similar issue as highlighted by @JTray123 and @krupnik-m on Angular 11.
@sandeepskak Angular 11.2.5 and ngx-image-zoom 0.6.0. https://github.com/astrobin/astrobin-ng
@siovene Thanks for the quick response. I got it working.
For anyone else who might stumble acrosss this problem:
I think the issue I was trying to do npm install ngx-image-zoom --save when it was already written to the package.json file. So just running npm install did the trick.
same issue. zoom window doesn't appear. after multiple reloads, it appears but isn't functional. Angular version 11.2.5, ngx-image-zoom 0.6.0
Does not install with Angular 12
It runs with Angular 12 on https://github.com/astrobin/astrobin-ng
I'm facing the same issue in a clean angular workspace:
npm --version
7.18.1node --version
v14.17.0ng --version
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 11.2.14
Node: 14.17.0
OS: linux x64
Angular: 11.2.14
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1102.14
@angular-devkit/build-angular 0.1102.14
@angular-devkit/core 11.2.14
@angular-devkit/schematics 11.2.14
@schematics/angular 11.2.14
@schematics/update 0.1102.14
rxjs 6.6.7
typescript 4.1.6
npm install ngx-image-zoom --save
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: test-ngx-image-zoom@0.0.0
npm ERR! Found: @angular/common@11.2.14
npm ERR! node_modules/@angular/common
npm ERR! @angular/common@"~11.2.14" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/common@"^9.0.1" from ngx-image-zoom@0.6.0
npm ERR! node_modules/ngx-image-zoom
npm ERR! ngx-image-zoom@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /my/local/dir/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! /my/local/dir/_logs/2021-07-28T17_37_53_980Z-debug.logI just upgrade angular 9 to 10 and functionality of image zoom has been broken
On Angular 13 I keep getting the same issues. Should we just not use this library? Anyone know of something similar we can use?
On Angular 13 I keep getting the same issues. Should we just not use this library? Anyone know of something similar we can use?
This library seems to be abandoned since 2020. I have solved my needs by creating my own library ngx-uc. But it is still in alpha and it still doesn't have all the features from ngx-image-zoom because I've invested time just in the features I needed. And it also have a slightly different approach.
Not completely abandoned. But has been way on the back burner. I thought most of these "not updated to latest angular" issues were easily circumvented still, but that doesn't seem to be the case. I've been meaning to get back to this project and things are finally opening up some in my life to get back to it. This realization that it was more dire than I thought was the final kick in the butt I needed. I'll take a look at getting back up and running for Angular 13. I'll sort some PRs and look through the issues as well. After that I'll see if I can get around to adding some much desired features too.
Sorry about the frustrations you've all seen with this project lately.
Also, ngx-uc looks quite nice. It does that "popout" zoom, that I've had in mind for this project, quite nicely. As it looks right now these two modules seems to complement each other quite nicely.
Hi @wittlock! It is nice to know that you will resume maintenance of this project. I think that this project is a reference on image zoom for Angular. At least it was the best project that I've found when searching for solutions for my use case. I've just created ngx-uc because the errors detailed on this issue were so annoying and I needed the "popout" thing. And also I've found no other Angular library alternative solution.
Also, ngx-uc looks quite nice. It does that "popout" zoom, that I've had in mind for this project, quite nicely. As it looks right now these two modules seems to complement each other quite nicely.
Thank you! Yes, right now the two modules complement each other. I have some ideas for new features in the future but it is not the main project that I'm working on so my priority now is just to keep it working. These new features will be implemented in the indefinite future.
I just published a 1.0.0-beta.0 to npm that is upgraded for angular 13. My test project is a little dusty but it seems to load it without any complaints. There are no other changes outside of automatic upgrades in there, so go test it and let me know if there's any issues.
I'll get started on those pull requests next.
Edit: Just to be clear, it's flagged as a beta version, so npm will only grab it if you specify version explicitly:
npm install ngx-image-zoom@1.0.0-beta.0
There's now a 1.0.0-beta.1 out as well with a new zoom mode and a new output. If it's giving you issues do please try .0 and see if that works or not.