Upgrading to Angular 14 throws error #498

andreaslarssen · 2022-12-03T14:43:10Z

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.

The text was updated successfully, but these errors were encountered:

andreaslarssen · 2022-12-03T15:55:39Z

EDIT: See that 3.8.0 has Angular 15 support, so downgraded to 3.6.2, but same result

vdnprasad · 2022-12-06T13:47:16Z

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

obikanubi · 2022-12-09T08:43:18Z

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"
  }
}

shantd9 · 2022-12-13T10:34:52Z

I'm facing the same issue, it works on a fresh installation but doesn't work in the application I am currently developing

shantd9 · 2022-12-13T12:35:21Z

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.

ht89 · 2022-12-29T02:50:26Z

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"
  }
}

This has fixed the issue. Thanks

Alessandroinfo · 2023-02-15T14:41:49Z

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.

gjsmith66 · 2023-05-29T21:57:07Z

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

marxxxx · 2023-06-02T10:49:22Z

@gjsmith66 but how can this workaround work in a CI/CD environment?

leonardodimarchi · 2023-06-02T14:44:47Z

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.

marxxxx · 2023-06-02T15:00:21Z

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

leonardodimarchi · 2023-06-02T15:13:25Z

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

werthdavid · 2023-06-02T15:25:30Z

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!

marxxxx · 2023-06-02T15:29:07Z

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.

leonardodimarchi · 2023-06-03T02:47:50Z

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

werthdavid · 2023-06-05T05:16:10Z

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

andreaslarssen · 2023-06-05T06:55:08Z

@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.

hadi-ilies · 2023-12-18T21:06:05Z

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!

andreaslarssen added the bug label Dec 3, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Upgrading to Angular 14 throws error #498

Upgrading to Angular 14 throws error #498

andreaslarssen commented Dec 3, 2022

andreaslarssen commented Dec 3, 2022

vdnprasad commented Dec 6, 2022 •

edited

obikanubi commented Dec 9, 2022

shantd9 commented Dec 13, 2022

shantd9 commented Dec 13, 2022

ht89 commented Dec 29, 2022

Alessandroinfo commented Feb 15, 2023

gjsmith66 commented May 29, 2023

marxxxx commented Jun 2, 2023

leonardodimarchi commented Jun 2, 2023 •

edited

marxxxx commented Jun 2, 2023 •

edited

leonardodimarchi commented Jun 2, 2023

werthdavid commented Jun 2, 2023

marxxxx commented Jun 2, 2023

leonardodimarchi commented Jun 3, 2023 •

edited

werthdavid commented Jun 5, 2023

andreaslarssen commented Jun 5, 2023

hadi-ilies commented Dec 18, 2023

Upgrading to Angular 14 throws error #498

Upgrading to Angular 14 throws error #498

Comments

andreaslarssen commented Dec 3, 2022

andreaslarssen commented Dec 3, 2022

vdnprasad commented Dec 6, 2022 • edited

obikanubi commented Dec 9, 2022

shantd9 commented Dec 13, 2022

shantd9 commented Dec 13, 2022

ht89 commented Dec 29, 2022

Alessandroinfo commented Feb 15, 2023

gjsmith66 commented May 29, 2023

marxxxx commented Jun 2, 2023

leonardodimarchi commented Jun 2, 2023 • edited

marxxxx commented Jun 2, 2023 • edited

leonardodimarchi commented Jun 2, 2023

werthdavid commented Jun 2, 2023

marxxxx commented Jun 2, 2023

leonardodimarchi commented Jun 3, 2023 • edited

werthdavid commented Jun 5, 2023

andreaslarssen commented Jun 5, 2023

hadi-ilies commented Dec 18, 2023

vdnprasad commented Dec 6, 2022 •

edited

leonardodimarchi commented Jun 2, 2023 •

edited

marxxxx commented Jun 2, 2023 •

edited

leonardodimarchi commented Jun 3, 2023 •

edited