feat: bump to Angular 17 (mnahkies#84)

johnnybarton411 · Nov 20, 2023 · 34f3117 · 34f3117
1 parent e58193f
commit 34f3117
Show file tree

Hide file tree

Showing 5 changed files with 3,049 additions and 2,239 deletions.
diff --git a/angular.json b/angular.json
@@ -108,18 +108,18 @@
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
-            "browserTarget": "ng-qrcode-demo:build"
+            "buildTarget": "ng-qrcode-demo:build"
           },
           "configurations": {
             "production": {
-              "browserTarget": "ng-qrcode-demo:build:production"
+              "buildTarget": "ng-qrcode-demo:build:production"
             }
           }
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "ng-qrcode-demo:build"
+            "buildTarget": "ng-qrcode-demo:build"
           }
         },
         "test": {

diff --git a/package.json b/package.json
@@ -30,50 +30,50 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^16.0.0",
-    "@angular/common": "^16.0.0",
-    "@angular/compiler": "^16.0.0",
-    "@angular/core": "^16.0.0",
-    "@angular/forms": "^16.0.0",
-    "@angular/platform-browser": "^16.0.0",
-    "@angular/platform-browser-dynamic": "^16.0.0",
-    "@angular/router": "^16.0.0",
-    "core-js": "^3.23.1",
-    "qrcode": "^1.5.0",
-    "rxjs": "^7.5.5",
-    "tslib": "^2.4.0",
-    "zone.js": "~0.13.0"
+    "@angular/animations": "^17.0.3",
+    "@angular/common": "^17.0.3",
+    "@angular/compiler": "^17.0.3",
+    "@angular/core": "^17.0.3",
+    "@angular/forms": "^17.0.3",
+    "@angular/platform-browser": "^17.0.3",
+    "@angular/platform-browser-dynamic": "^17.0.3",
+    "@angular/router": "^17.0.3",
+    "core-js": "^3.33.3",
+    "qrcode": "^1.5.3",
+    "rxjs": "^7.8.1",
+    "tslib": "^2.6.2",
+    "zone.js": "~0.14.2"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^16.0.0",
-    "@angular-eslint/builder": "16.0.1",
-    "@angular-eslint/eslint-plugin": "16.0.1",
-    "@angular-eslint/eslint-plugin-template": "16.0.1",
-    "@angular-eslint/schematics": "16.0.1",
-    "@angular-eslint/template-parser": "16.0.1",
-    "@angular/cli": "^16.0.0",
-    "@angular/compiler-cli": "^16.0.0",
-    "@angular/language-service": "^16.0.0",
-    "@types/jasmine": "~4.3.0",
-    "@types/jasminewd2": "^2.0.8",
-    "@types/node": "^18.11.10",
-    "@types/qrcode": "^1.4.2",
-    "@typescript-eslint/eslint-plugin": "5.59.2",
-    "@typescript-eslint/parser": "5.59.2",
-    "angular-cli-ghpages": "^1.0.0-rc.2",
-    "eslint": "^8.39.0",
-    "jasmine-core": "~4.5.0",
+    "@angular-devkit/build-angular": "^17.0.1",
+    "@angular-eslint/builder": "17.1.0",
+    "@angular-eslint/eslint-plugin": "17.1.0",
+    "@angular-eslint/eslint-plugin-template": "17.1.0",
+    "@angular-eslint/schematics": "17.1.0",
+    "@angular-eslint/template-parser": "17.1.0",
+    "@angular/cli": "^17.0.1",
+    "@angular/compiler-cli": "^17.0.3",
+    "@angular/language-service": "^17.0.3",
+    "@types/jasmine": "~5.1.2",
+    "@types/jasminewd2": "^2.0.13",
+    "@types/node": "^20.9.2",
+    "@types/qrcode": "^1.5.5",
+    "@typescript-eslint/eslint-plugin": "6.11.0",
+    "@typescript-eslint/parser": "6.11.0",
+    "angular-cli-ghpages": "^1.0.7",
+    "eslint": "^8.54.0",
+    "jasmine-core": "~5.1.1",
     "jasmine-spec-reporter": "~7.0.0",
-    "karma": "^6.4.0",
-    "karma-chrome-launcher": "~3.1.1",
-    "karma-coverage": "^2.2.0",
+    "karma": "^6.4.2",
+    "karma-chrome-launcher": "~3.2.0",
+    "karma-coverage": "^2.2.1",
     "karma-jasmine": "~5.1.0",
-    "karma-jasmine-html-reporter": "^2.0.0",
+    "karma-jasmine-html-reporter": "^2.1.0",
     "karma-mocha-reporter": "^2.2.5",
-    "ng-packagr": "^16.0.0",
+    "ng-packagr": "^17.0.1",
     "protractor": "~7.0.0",
-    "ts-node": "^10.8.1",
-    "typescript": "~5.0.4"
+    "ts-node": "^10.9.1",
+    "typescript": "~5.2.2"
   },
   "keywords": [
     "qr",

diff --git a/projects/ng-qrcode-demo/src/app/app.component.html b/projects/ng-qrcode-demo/src/app/app.component.html
@@ -36,7 +36,9 @@ <h3>Inputs:</h3>
 
       <label for="errorCorrectionLevel">Error Correction Level</label>
       <select id="errorCorrectionLevel" name="errorCorrectionLevel" [(ngModel)]="errorCorrectionLevel">
-        <option *ngFor="let value of errorCorrectionLevels" [value]="value">{{value}}</option>
+        @for (value of errorCorrectionLevels; track value) {
+          <option [value]="value">{{value}}</option>
+        }
       </select>
 
       <label for="showImage">Show Image in Center?</label>

diff --git a/projects/ng-qrcode/src/lib/qr-code.component.ts b/projects/ng-qrcode/src/lib/qr-code.component.ts
@@ -4,19 +4,21 @@ import { QrCodeErrorCorrectionLevel, RGBAColor } from "./types"
 @Component({
   selector: "qr-code",
   template: `
-    <canvas *ngIf="value"
-            [qrCode]="value"
-            [qrCodeErrorCorrectionLevel]="errorCorrectionLevel"
-            [qrCodeCenterImageSrc]="centerImageSrc"
-            [qrCodeCenterImageWidth]="centerImageSize"
-            [qrCodeCenterImageHeight]="centerImageSize"
-            [qrCodeMargin]="margin"
-            [width]="size"
-            [height]="size"
-            [darkColor]="darkColor"
-            [lightColor]="lightColor"
-    >
-    </canvas>
+    @if (value) {
+      <canvas
+        [qrCode]="value"
+        [qrCodeErrorCorrectionLevel]="errorCorrectionLevel"
+        [qrCodeCenterImageSrc]="centerImageSrc"
+        [qrCodeCenterImageWidth]="centerImageSize"
+        [qrCodeCenterImageHeight]="centerImageSize"
+        [qrCodeMargin]="margin"
+        [width]="size"
+        [height]="size"
+        [darkColor]="darkColor"
+        [lightColor]="lightColor"
+      >
+      </canvas>
+    }
   `,
   styles: [],
 })