Feature/ang 21

.github/workflows/ci.yml

@@ -13,7 +13,7 @@ jobs:
 
       - uses: actions/setup-node@v4
         with:
-          node-version: 22
+          node-version: 24
 
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path

.github/workflows/npmpublish.yml

@@ -16,7 +16,7 @@ jobs:
 
       - uses: actions/setup-node@v4
         with:
-          node-version: 22
+          node-version: 24
 
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path
@@ -62,7 +62,7 @@ jobs:
 
       - uses: actions/setup-node@v4
         with:
-          node-version: 22
+          node-version: 24
           registry-url: https://registry.npmjs.org/
 
       - run: npm publish ./package.tgz --access public

README.md

@@ -56,21 +56,10 @@ I promise that it's **very** easy to use:
 
 ### Angular version compatibility
 
-Angular version compatibility table:
-
-| Angular | @zxing/ngx-scanner |
-|---------|--------------------|
-| 17.x.x  | 17.0.0             |
-| 16.x.x  | 3.9.1 & 16.0.0     |
-| 15.x.x  | 3.9.0              |
-| 14.x.x  | 3.6.2              |
-| 13.x.x  | 3.5.0              |
-| 12.x.x  | 3.3.0              |
-| 10.x.x  | 3.1.3              |
-| 9.x.x   | 3.0.1              |
-| 8.x.x   | 2.0.1              |
-| 5.x.x   | 1.7.1              |
-| 4.x.x   | 0.3.4              |
+Angular version compatibility:
+
+The main version of @zxing/ngx-scanner will be compatible with the corresponding Angular version.
+That means e.g. @zxing/ngx-scanner@21.0.0 will be compatible with Angular 21.
 
 (Sorry for not using semver in the past, future releases will use the same major as the supported Angular version)
 

package.json

@@ -46,49 +46,49 @@
     "deploy:demo:ngh": "npm run build:gh-pages && npx ngh --dir=dist/gh-pages"
   },
   "dependencies": {
-    "@angular/animations": "^20.0.0",
-    "@angular/cdk": "^20.0.0",
-    "@angular/common": "^20.0.0",
-    "@angular/core": "^20.0.0",
-    "@angular/forms": "^20.0.0",
-    "@angular/material": "^20.0.0",
-    "@angular/platform-browser": "^20.0.0",
-    "@angular/platform-browser-dynamic": "^20.0.0",
-    "@angular/router": "^20.0.0",
-    "@angular/service-worker": "^20.0.0",
+    "@angular/animations": "^21.0.2",
+    "@angular/cdk": "^21.0.1",
+    "@angular/common": "^21.0.2",
+    "@angular/core": "^21.0.2",
+    "@angular/forms": "^21.0.2",
+    "@angular/material": "^21.0.1",
+    "@angular/platform-browser": "^21.0.2",
+    "@angular/platform-browser-dynamic": "^21.0.2",
+    "@angular/router": "^21.0.2",
+    "@angular/service-worker": "^21.0.2",
     "@zxing/browser": "^0.1.5",
     "@zxing/library": "^0.21.3",
-    "rxjs": "^7.8.1",
-    "tslib": "^2.6.2"
+    "rxjs": "^7.8.2",
+    "tslib": "^2.8.1"
   },
   "devDependencies": {
-    "@angular-devkit/architect": "^0.2000.0",
-    "@angular-devkit/build-angular": "^20.0.0",
-    "@angular-devkit/core": "^20.0.0",
-    "@angular-devkit/schematics": "^20.0.0",
-    "@angular/cli": "^20.0.0",
-    "@angular/compiler": "^20.0.0",
-    "@angular/compiler-cli": "^20.0.0",
-    "@angular/language-service": "^20.0.0",
-    "@compodoc/compodoc": "^1.1.24",
-    "@types/jasmine": "^5.1.4",
+    "@angular-devkit/architect": "^0.2100.1",
+    "@angular-devkit/build-angular": "^21.0.1",
+    "@angular-devkit/core": "^21.0.1",
+    "@angular-devkit/schematics": "^21.0.1",
+    "@angular/cli": "^21.0.1",
+    "@angular/compiler": "^21.0.2",
+    "@angular/compiler-cli": "^21.0.2",
+    "@angular/language-service": "^21.0.2",
+    "@compodoc/compodoc": "^1.1.32",
+    "@types/jasmine": "^5.1.13",
     "@types/jasminewd2": "~2.0.13",
-    "@types/node": "^20.12.12",
+    "@types/node": "^24.10.1",
     "codelyzer": "^6.0.2",
-    "jasmine-core": "^5.4.0",
+    "jasmine-core": "^5.13.0",
     "jasmine-spec-reporter": "^7.0.0",
     "karma": "^6.4.4",
     "karma-chrome-launcher": "^3.2.0",
     "karma-cli": "^2.0.0",
     "karma-coverage-istanbul-reporter": "^3.0.3",
     "karma-jasmine": "^5.1.0",
     "karma-jasmine-html-reporter": "^2.1.0",
-    "ng-packagr": "^20.0.0",
+    "ng-packagr": "^21.0.0",
     "protractor": "^7.0.0",
     "ts-node": "^10.9.2",
     "tslint": "^6.1.3",
-    "typescript": "5.8.2",
-    "zone.js": "~0.15.0"
+    "typescript": "5.9.3",
+    "zone.js": "~0.16.0"
   },
   "collective": {
     "type": "opencollective",

projects/zxing-scanner-demo/.browserslistrc

@@ -1,12 +1,2 @@
-# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
-# For additional information regarding the format and rule options, please see:
-# https://github.com/browserslist/browserslist#queries
-
-# You can see what browsers were selected by your queries by running:
-#   npx browserslist
-
-> 0.5%
-last 2 versions
-Firefox ESR
-not dead
-not IE 9-11 # For IE 9-11 support, remove 'not'.
+defaults and fully supports es6-module
+maintained node versions

projects/zxing-scanner-demo/src/app/app.component.html

@@ -5,10 +5,12 @@
       <mat-list-option checkboxPosition="start" (click)="toggleTryHarder()" [selected]="tryHarder">
         Enable Try-harder
       </mat-list-option>
-      <mat-list-option checkboxPosition="start" (click)="toggleTorch()" [selected]="torchEnabled"
-        *ngIf="torchAvailable$ | async">
-        Enable Torch
-      </mat-list-option>
+      @if (torchAvailable$ | async) {
+        <mat-list-option checkboxPosition="start" (click)="toggleTorch()" [selected]="torchEnabled"
+          >
+          Enable Torch
+        </mat-list-option>
+      }
     </mat-selection-list>
     <mat-divider></mat-divider>
     <button mat-menu-item (click)="openFormatsDialog()">Barcode formats</button>
@@ -19,7 +21,9 @@
     <mat-form-field appearance="fill">
       <mat-select [value]="deviceSelected" (valueChange)="onDeviceSelectChange($event)">
         <mat-option value="">No Device Selected</mat-option>
-        <mat-option *ngFor="let device of availableDevices" [value]="device.deviceId">{{device.label}}</mat-option>
+        @for (device of availableDevices; track device) {
+          <mat-option [value]="device.deviceId">{{device.label}}</mat-option>
+        }
       </mat-select>
     </mat-form-field>
     <button mat-icon-button [matMenuTriggerFor]="appMenu">
@@ -29,50 +33,41 @@
 
   <zxing-scanner [torch]="torchEnabled" [device]="deviceCurrent" (deviceChange)="onDeviceChange($event)" (scanSuccess)="onCodeResult($event)"
     [formats]="formatsEnabled" [tryHarder]="tryHarder" (permissionResponse)="onHasPermission($event)"
-    (camerasFound)="onCamerasFound($event)" (torchCompatible)="onTorchCompatible($event)"></zxing-scanner>
-
-  <section class="results" *ngIf="qrResultString">
-    <div>
-      <small>Result</small>
-      <strong>{{ qrResultString }}</strong>
-    </div>
-    <button mat-icon-button (click)="clearResult()">&times;</button>
-  </section>
+  (camerasFound)="onCamerasFound($event)" (torchCompatible)="onTorchCompatible($event)"></zxing-scanner>
+
+  @if (qrResultString) {
+    <section class="results">
+      <div>
+        <small>Result</small>
+        <strong>{{ qrResultString }}</strong>
+      </div>
+      <button mat-icon-button (click)="clearResult()">&times;</button>
+    </section>
+  }
 
 </div>
 
-<ng-container *ngIf="hasPermission === undefined">
-
+@if (hasPermission === undefined) {
   <h2>Waiting for permissions.</h2>
-
   <blockquote>
     If your device does not has cameras, no permissions will be asked.
   </blockquote>
+}
 
-</ng-container>
-
-<ng-container *ngIf="hasPermission === false">
-
+@if (hasPermission === false) {
   <h2>You denied the camera permission, we can't scan anything without it. 😪</h2>
+}
 
-</ng-container>
-
-<ng-container *ngIf="hasDevices === undefined">
-
+@if (hasDevices === undefined) {
   <h2>Couldn't check for devices.</h2>
-
   <blockquote>
     This may be caused by some security error.
   </blockquote>
+}
 
-</ng-container>
-
-<ng-container *ngIf="hasDevices === false">
-
+@if (hasDevices === false) {
   <h2>No devices were found.</h2>
-
   <blockquote>
     I believe your device has no media devices attached to.
   </blockquote>
-
-</ng-container>
+}

projects/zxing-scanner-demo/src/app/formats-dialog/formats-dialog.component.html

@@ -3,9 +3,11 @@
 </header>
 
 <mat-selection-list #selectedFormats (selectionChange)="onSelectionChange($event)">
-  <mat-list-option *ngFor="let format of formatsAvailable" [selected]="isEnabled(format)" [value]="format">
-    {{ formatNames[format] }}
-  </mat-list-option>
+  @for (format of formatsAvailable; track format) {
+    <mat-list-option [selected]="isEnabled(format)" [value]="format">
+      {{ formatNames[format] }}
+    </mat-list-option>
+  }
 </mat-selection-list>
 
 <mat-dialog-actions>

projects/zxing-scanner-demo/src/main.ts

@@ -1,5 +1,5 @@
 
-import { enableProdMode } from '@angular/core';
+import { enableProdMode, provideZoneChangeDetection } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
 import { AppModule } from './app/app.module';
@@ -9,5 +9,5 @@ if (environment.production) {
   enableProdMode();
 }
 
-platformBrowserDynamic().bootstrapModule(AppModule)
+platformBrowserDynamic().bootstrapModule(AppModule, { applicationProviders: [provideZoneChangeDetection()], })
   .catch(err => console.error(err));

projects/zxing-scanner/package.json

@@ -1,16 +1,17 @@
 {
   "name": "@zxing/ngx-scanner",
-  "version": "20.0.0",
+  "version": "21.0.0",
   "description": "High-performance Angular barcode scanner component based on ZXing.",
   "homepage": "https://github.com/zxing-js/ngx-scanner#readme",
   "private": false,
   "license": "MIT",
   "peerDependencies": {
-    "@angular/common": "^11.2.11 || ^12.0.4 || ^13.0.0 || ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0",
-    "@angular/core": "^11.2.11 || ^12.0.4 || ^13.0.0 || ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0",
-    "@angular/forms": "^11.2.11 || ^12.0.4 || ^13.0.0 || ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0",
+    "@angular/common": "^21.0.0",
+    "@angular/core": "^21.0.0",
+    "@angular/forms": "^21.0.0",
     "@zxing/browser": "^0.1.4",
     "@zxing/library": "^0.21.0",
-    "rxjs": "^6.6.3 || ^7.0.0"
+    "rxjs": "^6.5.3 || ^7.4.0",
+    "typescript": "^5.9.0"
   }
 }

projects/zxing-scanner/tsconfig.lib.json

@@ -3,17 +3,13 @@
   "compilerOptions": {
     "outDir": "../../out-tsc/lib",
     "module": "es2015",
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "declaration": true,
     "sourceMap": true,
     "inlineSources": true,
     "experimentalDecorators": true,
     "importHelpers": true,
-    "types": [],
-    "lib": [
-      "dom",
-      "es2018"
-    ]
+    "types": []
   },
   "angularCompilerOptions": {
     "skipTemplateCodegen": true,

tsconfig.json

@@ -7,17 +7,13 @@
     "sourceMap": true,
     "declaration": false,
     "module": "esnext",
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "experimentalDecorators": true,
     "importHelpers": true,
     "target": "ES2022",
     "typeRoots": [
       "node_modules/@types"
     ],
-    "lib": [
-      "es2018",
-      "dom"
-    ],
     "useDefineForClassFields": false
   }
 }