ngx-scanner: 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.

About this issue

  • Original URL
  • State: open
  • Created 2 years ago
  • Reactions: 1
  • Comments: 18 (2 by maintainers)

Most upvoted comments

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/ngx-scanner@3.6.2 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"
  }
}

For me, downgrading to 3.9.0 worked with angular 15. The latest 3.9.1 was producing the error above.

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!

Thanks, @leonardodimarchi I’ll copy that to the readme and also release a 16.0 that is similar to 3.9.1

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

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