ngx-scanner
ngx-scanner copied to clipboard
zxing-js
Upgrading to Angular 14 throws error
Describe the bug
After upgrading to Anglular 14, npm start throws this error:
Error: node_modules/@zxing/ngx-scanner/lib/zxing-scanner.component.d.ts:305:18 - error TS2707: Generic type 'ɵɵComponentDeclaration' requires between 7 and 8 type arguments.
To Reproduce
"@zxing/browser": "0.1.1",
"@zxing/library": "^0.19.1",
"@zxing/ngx-scanner": "^3.8.0",
Desktop (please complete the following information):
- OS: Ubuntu 22.04.1 LTS
- Browser: Chrome
- Version 107.0.5304.110 (Official Build) (64-bit)
Additional context Add any other context about the problem here.
EDIT: See that 3.8.0 has Angular 15 support, so downgraded to 3.6.2, but same result
Getting Same issue for me, I'm using below versions for my application
Error: node_modules/@zxing/ngx-scanner/lib/zxing-scanner.component.d.ts:305:18 - error TS2707: Generic type 'ɵɵComponentDeclaration' requires between 7 and 8 type arguments.
"@zxing/browser": "^0.1.1", "@zxing/library": "^0.19.1", "@zxing/ngx-scanner": "^3.6.0", "tslib": "^2.3.1",
Angular CLI 14.2.10 rxjs 7.4.0 typescript 4.8.4
Tested on a fresh angular app version 14.2.0 Seems to work with @zxing/[email protected] See package.json below
{
"name": "test",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test"
},
"private": true,
"dependencies": {
"@angular/animations": "^14.2.0",
"@angular/common": "^14.2.0",
"@angular/compiler": "^14.2.0",
"@angular/core": "^14.2.0",
"@angular/forms": "^14.2.0",
"@angular/platform-browser": "^14.2.0",
"@angular/platform-browser-dynamic": "^14.2.0",
"@angular/router": "^14.2.0",
"@zxing/browser": "^0.1.1",
"@zxing/library": "^0.19.1",
"@zxing/ngx-scanner": "^3.6.2",
"rxjs": "~7.5.0",
"tslib": "^2.3.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "^14.2.6",
"@angular/cli": "~14.2.6",
"@angular/compiler-cli": "^14.2.0",
"@types/jasmine": "~4.0.0",
"jasmine-core": "~4.3.0",
"karma": "~6.4.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.2.0",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.0.0",
"typescript": "~4.7.2"
}
}
I'm facing the same issue, it works on a fresh installation but doesn't work in the application I am currently developing
The way it worked for me was to remove the references to @zxing/browser and @zxing/library, and use
"@zxing/ngx-scanner": "3.6.2".
Using "@zxing/ngx-scanner": "^3.6.2" did not work.
Tested on a fresh angular app version 14.2.0 Seems to work with @zxing/[email protected] See package.json below
{ "name": "test", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "watch": "ng build --watch --configuration development", "test": "ng test" }, "private": true, "dependencies": { "@angular/animations": "^14.2.0", "@angular/common": "^14.2.0", "@angular/compiler": "^14.2.0", "@angular/core": "^14.2.0", "@angular/forms": "^14.2.0", "@angular/platform-browser": "^14.2.0", "@angular/platform-browser-dynamic": "^14.2.0", "@angular/router": "^14.2.0", "@zxing/browser": "^0.1.1", "@zxing/library": "^0.19.1", "@zxing/ngx-scanner": "^3.6.2", "rxjs": "~7.5.0", "tslib": "^2.3.0", "zone.js": "~0.11.4" }, "devDependencies": { "@angular-devkit/build-angular": "^14.2.6", "@angular/cli": "~14.2.6", "@angular/compiler-cli": "^14.2.0", "@types/jasmine": "~4.0.0", "jasmine-core": "~4.3.0", "karma": "~6.4.0", "karma-chrome-launcher": "~3.1.0", "karma-coverage": "~2.2.0", "karma-jasmine": "~5.1.0", "karma-jasmine-html-reporter": "~2.0.0", "typescript": "~4.7.2" } }
This has fixed the issue. Thanks
I still have same error with:
"dependencies": {
"@angular/animations": "^14.2.0",
"@angular/cdk": "^14.2.7",
"@angular/common": "~14.2.0",
"@angular/compiler": "~14.2.0",
"@angular/core": "~14.2.0",
"@angular/forms": "~14.2.0",
"@angular/platform-browser": "~14.2.0",
"@angular/platform-browser-dynamic": "~14.2.0",
"@angular/router": "~14.2.0",
"@ngxs/router-plugin": "~3.7.4",
"@ngxs/store": "~3.7.4",
"@rxweb/reactive-form-validators": "^2.1.3",
"@types/chart.js": "^2.9.28",
"@types/overlayscrollbars": "^1.9.0",
"@zxing/browser": "^0.1.1",
"@zxing/library": "^0.19.1",
"@zxing/ngx-scanner": "^3.6.2",
"async": "^3.2.4",
"css-element-queries": "^1.2.3",
"file-saver": "^2.0.2",
"js-base64": "^2.5.1",
"keycode-js": "^3.1.0",
"lodash-es": "^4.17.21",
"lottie-web": "^5.8.1",
"lz-string": "^1.4.4",
"moment": "^2.29.4",
"rxjs": "~6.6.3",
"tslib": "^2.0.0",
"uuid": "^9.0.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "^14.2.6",
"@angular-eslint/builder": "14.2.0",
"@angular-eslint/eslint-plugin": "14.2.0",
"@angular-eslint/eslint-plugin-template": "14.2.0",
"@angular-eslint/schematics": "14.2.0",
"@angular-eslint/template-parser": "14.2.0",
"@angular/cli": "~14.2.6",
"@angular/compiler-cli": "~14.2.6",
"@angular/language-service": "~14.2.6",
"@ngxs/devtools-plugin": "^3.7.4",
"@types/jasmine": "~3.6.0",
"@types/jasminewd2": "~2.0.3",
"@types/lodash-es": "^4.17.6",
"@types/lz-string": "^1.3.34",
"@types/node": "^12.11.1",
"@typescript-eslint/eslint-plugin": "5.27.1",
"@typescript-eslint/parser": "5.27.1",
"eslint": "^8.17.0",
"eslint-plugin-rxjs": "^5.0.2",
"husky": "^4.2.3",
"jasmine-core": "^4.0.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~6.3.2",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "^5.0.0",
"karma-jasmine-html-reporter": "^2.0.0",
"protractor": "~7.0.0",
"ts-node": "~8.3.0",
"typescript": "~4.8.4"
}
Error: node_modules/@zxing/ngx-scanner/lib/zxing-scanner.component.d.ts:305:18 - error TS2707: Generic type 'ɵɵComponentDeclaration' requires between 7 and 8 type arguments.
Change line to static ɵcmp: i0.ɵɵComponentDeclaration<ZXingScannerComponent, "zxing-scanner", never, { "autofocusEnabled": "autofocusEnabled"; "timeBetweenScans": "timeBetweenScans"; "delayBetweenScanSuccess": "delayBetweenScanSuccess"; "autostart": "autostart"; "previewFitMode": "previewFitMode"; "device": "device"; "formats": "formats"; "videoConstraints": "videoConstraints"; "torch": "torch"; "enable": "enable"; "tryHarder": "tryHarder"; }, { "autostarted": "autostarted"; "autostarting": "autostarting"; "torchCompatible": "torchCompatible"; "scanSuccess": "scanSuccess"; "scanFailure": "scanFailure"; "scanError": "scanError"; "scanComplete": "scanComplete"; "camerasFound": "camerasFound"; "camerasNotFound": "camerasNotFound"; "permissionResponse": "permissionResponse"; "hasDevices": "hasDevices"; "deviceChange": "deviceChange"; }, never, never, false>;
and it works... The error is right there, too many arguments in type definition
I still have same error with:
"dependencies": { "@angular/animations": "^14.2.0", "@angular/cdk": "^14.2.7", "@angular/common": "~14.2.0", "@angular/compiler": "~14.2.0", "@angular/core": "~14.2.0", "@angular/forms": "~14.2.0", "@angular/platform-browser": "~14.2.0", "@angular/platform-browser-dynamic": "~14.2.0", "@angular/router": "~14.2.0", "@ngxs/router-plugin": "~3.7.4", "@ngxs/store": "~3.7.4", "@rxweb/reactive-form-validators": "^2.1.3", "@types/chart.js": "^2.9.28", "@types/overlayscrollbars": "^1.9.0", "@zxing/browser": "^0.1.1", "@zxing/library": "^0.19.1", "@zxing/ngx-scanner": "^3.6.2", "async": "^3.2.4", "css-element-queries": "^1.2.3", "file-saver": "^2.0.2", "js-base64": "^2.5.1", "keycode-js": "^3.1.0", "lodash-es": "^4.17.21", "lottie-web": "^5.8.1", "lz-string": "^1.4.4", "moment": "^2.29.4", "rxjs": "~6.6.3", "tslib": "^2.0.0", "uuid": "^9.0.0", "zone.js": "~0.11.4" }, "devDependencies": { "@angular-devkit/build-angular": "^14.2.6", "@angular-eslint/builder": "14.2.0", "@angular-eslint/eslint-plugin": "14.2.0", "@angular-eslint/eslint-plugin-template": "14.2.0", "@angular-eslint/schematics": "14.2.0", "@angular-eslint/template-parser": "14.2.0", "@angular/cli": "~14.2.6", "@angular/compiler-cli": "~14.2.6", "@angular/language-service": "~14.2.6", "@ngxs/devtools-plugin": "^3.7.4", "@types/jasmine": "~3.6.0", "@types/jasminewd2": "~2.0.3", "@types/lodash-es": "^4.17.6", "@types/lz-string": "^1.3.34", "@types/node": "^12.11.1", "@typescript-eslint/eslint-plugin": "5.27.1", "@typescript-eslint/parser": "5.27.1", "eslint": "^8.17.0", "eslint-plugin-rxjs": "^5.0.2", "husky": "^4.2.3", "jasmine-core": "^4.0.0", "jasmine-spec-reporter": "~5.0.0", "karma": "~6.3.2", "karma-chrome-launcher": "~3.1.0", "karma-coverage-istanbul-reporter": "~3.0.2", "karma-jasmine": "^5.0.0", "karma-jasmine-html-reporter": "^2.0.0", "protractor": "~7.0.0", "ts-node": "~8.3.0", "typescript": "~4.8.4" }
Error: node_modules/@zxing/ngx-scanner/lib/zxing-scanner.component.d.ts:305:18 - error TS2707: Generic type 'ɵɵComponentDeclaration' requires between 7 and 8 type arguments.
I was facing the same issue, it seems like the library should increase the major version when upgrading angular versions, but it doesn't.
"@zxing/ngx-scanner": "^3.6.2" This will tell npm to get 3.x.x, increasing the minor and patch versions (to 3.9.1 for example).
The latest version supporting angular 14 is exactly 3.6.2, so we need to remove the caret from the version and it should work fine: "@zxing/ngx-scanner": "3.6.2.
For me, downgrading to 3.9.0 worked with angular 15. The latest 3.9.1 was producing the error above.
For me, downgrading to 3.9.0 worked with angular 15. The latest 3.9.1 was producing the error above.
Nice! It's indeed a little bit confusing when the patch version has a breaking change
It is.. I'm sorry for that. I'll create minor updates for different angular versions in the future. I thought that the versions would support multiple angular versions at the same time that's why only the patch level was updated!
It is.. I'm sorry for that. I'll create minor updates for different angular versions in the future. I thought that the versions would support multiple angular versions at the same time that's why only the patch level was updated!
Thank you ! Maybe it's possible to create a mapping table in the Readme to highlight angular version compatibility. Other angular wrappers like ngx-bootstrap do it like that.
It is.. I'm sorry for that. I'll create minor updates for different angular versions in the future. I thought that the versions would support multiple angular versions at the same time that's why only the patch level was updated!
It is okay, I've seen many good libraries starting without updating the major versions and then changing the versioning system through the years. Thank you for worrying about it =)
Also, I like @marxxxx's suggestion, it might be nice to have the compatibility table highlighted in the README for newcomers, with a description that says to fix the version at the package.json.
EDIT:
I've added a version compatibility table into the wiki Getting started page
Thanks, @leonardodimarchi I'll copy that to the readme and also release a 16.0 that is similar to 3.9.1
@werthdavid Not sure it's such a good idea to follow Angular versions. What if you need to introduce a breaking change before Angular releases a new version? Following semver is good practice, but there's no need to tie it to the Angular release cycle, just keep a compatability refrence up to date.
For me, downgrading to 3.9.0 worked with angular 15. The latest 3.9.1 was producing the error above.
It worked for me too with Angular 15!
