Angular 20 upgrade (#132)

mohammedsahl · web-flow · commit bddc4cd5e3ff · 2025-12-19T09:19:41.000+01:00
* update typescript, angular-builders/jest and typescript-eslint packages

* Update yarn lock file

* Update @angular/core@20 @angular/cli@20

* Use field injections instead of constructor injections

* Update peer dependencies

* Update peer dependencies
diff --git a/README.md b/README.md
@@ -32,7 +32,8 @@ npm install angular-cc-library --save
 ## Version Compatibility
 
 | Angular | Library |
-| ------- | ------- |
+|---------|---------|
+| 20.x    | 3.6.x   |
 | 19.x    | 3.5.x   |
 | 18.x    | 3.4.x   |
 | 17.x    | 3.3.x   |
diff --git a/angular.json b/angular.json
@@ -59,12 +59,15 @@
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular-devkit/build-angular:application",
           "options": {
-            "outputPath": "dist/example",
+            "outputPath": {
+              "base": "dist/example"
+            },
             "index": "projects/example/src/index.html",
-            "main": "projects/example/src/main.ts",
-            "polyfills": "projects/example/src/polyfills.ts",
+            "polyfills": [
+              "projects/example/src/polyfills.ts"
+            ],
             "tsConfig": "projects/example/tsconfig.app.json",
             "assets": [
               "projects/example/src/favicon.ico",
@@ -74,12 +77,11 @@
               "projects/example/src/styles.css"
             ],
             "scripts": [],
-            "vendorChunk": true,
             "extractLicenses": false,
-            "buildOptimizer": false,
             "sourceMap": true,
             "optimization": false,
-            "namedChunks": true
+            "namedChunks": true,
+            "browser": "projects/example/src/main.ts"
           },
           "configurations": {
             "production": {
@@ -94,8 +96,6 @@
               "sourceMap": false,
               "namedChunks": false,
               "extractLicenses": true,
-              "vendorChunk": false,
-              "buildOptimizer": true,
               "budgets": [
                 {
                   "type": "initial",
@@ -152,5 +152,31 @@
         }
       }
     }
+  },
+  "schematics": {
+    "@schematics/angular:component": {
+      "type": "component"
+    },
+    "@schematics/angular:directive": {
+      "type": "directive"
+    },
+    "@schematics/angular:service": {
+      "type": "service"
+    },
+    "@schematics/angular:guard": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:interceptor": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:module": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:pipe": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:resolver": {
+      "typeSeparator": "."
+    }
   }
 }
diff --git a/package.json b/package.json
@@ -13,41 +13,41 @@
     "prepare": "husky"
   },
   "dependencies": {
-    "@angular/common": "^19.1.5",
-    "@angular/compiler": "^19.1.5",
-    "@angular/core": "^19.1.5",
-    "@angular/forms": "^19.1.5",
-    "@angular/platform-browser": "^19.1.5",
-    "@angular/platform-browser-dynamic": "^19.1.5",
+    "@angular/common": "^20.3.13",
+    "@angular/compiler": "^20.3.13",
+    "@angular/core": "^20.3.13",
+    "@angular/forms": "^20.3.13",
+    "@angular/platform-browser": "^20.3.13",
+    "@angular/platform-browser-dynamic": "^20.3.13",
     "rxjs": "~7.8.1",
     "tslib": "^2.8.1",
     "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@angular-builders/jest": "19.0.0",
-    "@angular-devkit/build-angular": "^19.1.6",
-    "@angular-eslint/builder": "19.0.2",
-    "@angular-eslint/eslint-plugin": "19.0.2",
-    "@angular-eslint/eslint-plugin-template": "19.0.2",
-    "@angular-eslint/schematics": "19.0.2",
-    "@angular-eslint/template-parser": "19.0.2",
-    "@angular/cli": "^19.1.6",
-    "@angular/compiler-cli": "^19.1.5",
-    "@angular/language-service": "^19.1.5",
+    "@angular-builders/jest": "20.0.0",
+    "@angular-devkit/build-angular": "^20.3.11",
+    "@angular-eslint/builder": "20.6.0",
+    "@angular-eslint/eslint-plugin": "20.6.0",
+    "@angular-eslint/eslint-plugin-template": "20.6.0",
+    "@angular-eslint/schematics": "20.6.0",
+    "@angular-eslint/template-parser": "20.6.0",
+    "@angular/cli": "^20.3.11",
+    "@angular/compiler-cli": "^20.3.13",
+    "@angular/language-service": "^20.3.13",
     "@release-it/bumper": "^6.0.1",
     "@release-it/conventional-changelog": "^8.0.2",
     "@types/jest": "^29.5.14",
     "@types/node": "^22.13.1",
-    "@typescript-eslint/eslint-plugin": "8.23.0",
-    "@typescript-eslint/parser": "8.23.0",
+    "@typescript-eslint/eslint-plugin": "8.47.0",
+    "@typescript-eslint/parser": "8.47.0",
     "eslint": "^8.57.1",
     "husky": "^9.1.7",
     "jest": "29.7.0",
     "lint-staged": "^15.4.3",
-    "ng-packagr": "^19.1.2",
+    "ng-packagr": "^20.3.2",
     "release-it": "^17.11.0",
     "ts-node": "~10.9.2",
-    "typescript": "~5.7.3"
+    "typescript": "~5.9.3"
   },
   "lint-staged": {
     "*.{ts,component.html}": [
diff --git a/projects/angular-cc-library/package.json b/projects/angular-cc-library/package.json
@@ -23,7 +23,7 @@
     "tslib": "^2.8.1"
   },
   "peerDependencies": {
-    "@angular/common": "^19.1.4",
-    "@angular/core": "^19.1.4"
+    "@angular/common": "^19.0.0 || ^20.0.0",
+    "@angular/core": "^19.0.0 || ^20.0.0"
   }
 }
diff --git a/projects/angular-cc-library/src/lib/credit-card.ts b/projects/angular-cc-library/src/lib/credit-card.ts
@@ -176,7 +176,7 @@ export class CreditCard {
 
     try {
       cursor = target.selectionStart;
-    } catch (error) {
+    } catch {
       // do nothing
     }
 
diff --git a/projects/angular-cc-library/src/lib/directives/credit-card-format.directive.ts b/projects/angular-cc-library/src/lib/directives/credit-card-format.directive.ts
@@ -1,4 +1,4 @@
-import { Directive, ElementRef, HostListener, Optional, Self } from '@angular/core';
+import { Directive, ElementRef, HostListener, inject } from '@angular/core';
 import { CreditCard } from '../credit-card';
 import { NgControl } from '@angular/forms';
 import { BehaviorSubject } from 'rxjs';
@@ -9,18 +9,13 @@ import { BehaviorSubject } from 'rxjs';
   standalone: true,
 })
 export class CreditCardFormatDirective {
-  private target: HTMLInputElement;
+  private el = inject(ElementRef);
+  private target: HTMLInputElement = this.el.nativeElement;
+  private control = inject(NgControl, { optional: true, self: true });
   private cards = CreditCard.cards();
 
   public resolvedScheme$ = new BehaviorSubject<string>('unknown');
 
-  constructor(
-    private el: ElementRef,
-    @Self() @Optional() private control: NgControl,
-  ) {
-    this.target = this.el.nativeElement;
-  }
-
   /**
    * Updates the value to target element, or FormControl if exists.
    * @param value New input value.
diff --git a/projects/angular-cc-library/src/lib/directives/cvc-format.directive.ts b/projects/angular-cc-library/src/lib/directives/cvc-format.directive.ts
@@ -1,4 +1,4 @@
-import { Directive, ElementRef, HostListener, Optional, Self } from '@angular/core';
+import { Directive, ElementRef, HostListener, inject } from '@angular/core';
 import { CreditCard } from '../credit-card';
 import { NgControl } from '@angular/forms';
 
@@ -7,14 +7,9 @@ import { NgControl } from '@angular/forms';
   standalone: true,
 })
 export class CvcFormatDirective {
-  private target: HTMLInputElement;
-
-  constructor(
-    private el: ElementRef,
-    @Self() @Optional() private control: NgControl,
-  ) {
-    this.target = this.el.nativeElement;
-  }
+  private el = inject(ElementRef);
+  private target: HTMLInputElement = this.el.nativeElement;
+  private control = inject(NgControl, { optional: true, self: true });
 
   /**
    * Updates the value to target element, or FormControl if exists.
diff --git a/projects/angular-cc-library/src/lib/directives/expiry-format.directive.ts b/projects/angular-cc-library/src/lib/directives/expiry-format.directive.ts
@@ -1,4 +1,4 @@
-import { Directive, ElementRef, HostListener, Optional, Self } from '@angular/core';
+import { Directive, ElementRef, HostListener, inject } from '@angular/core';
 import { CreditCard } from '../credit-card';
 import { NgControl } from '@angular/forms';
 
@@ -7,14 +7,9 @@ import { NgControl } from '@angular/forms';
   standalone: true,
 })
 export class ExpiryFormatDirective {
-  private target: HTMLInputElement;
-
-  constructor(
-    private el: ElementRef,
-    @Self() @Optional() private control: NgControl,
-  ) {
-    this.target = this.el.nativeElement;
-  }
+  private el = inject(ElementRef);
+  private target: HTMLInputElement = this.el.nativeElement;
+  private control = inject(NgControl, { optional: true, self: true });
 
   /**
    * Updates the value to target element, or FormControl if exists.
diff --git a/projects/example/src/app/app.component.ts b/projects/example/src/app/app.component.ts
@@ -1,5 +1,5 @@
 import { AsyncPipe } from '@angular/common';
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { Validators, FormGroup, FormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { CreditCardValidators, CreditCard, CreditCardDirectivesModule } from 'angular-cc-library';
 import { defer } from 'rxjs';
@@ -11,6 +11,8 @@ import { map } from 'rxjs/operators';
     imports: [FormsModule, ReactiveFormsModule, AsyncPipe, CreditCardDirectivesModule]
 })
 export class AppComponent {
+  private fb = inject(FormBuilder);
+
   public demoForm = this.fb.group({
     creditCard: ['', [CreditCardValidators.validateCCNumber]],
     expDate: ['', [CreditCardValidators.validateExpDate]],
@@ -22,8 +24,6 @@ export class AppComponent {
   public type$ = defer(() => this.demoForm.get('creditCard').valueChanges)
     .pipe(map((num: string) => CreditCard.cardType(num)));
 
-  constructor(private fb: FormBuilder) {}
-
   public goToNextField(controlName: string, nextField: HTMLInputElement) {
     if (this.demoForm.get(controlName)?.valid) {
       nextField.focus();
diff --git a/tsconfig.json b/tsconfig.json
@@ -4,6 +4,7 @@
     "baseUrl": "./",
     "outDir": "./dist/out-tsc",
     "noImplicitAny": true,
+    "esModuleInterop": true,
     "noImplicitReturns": false,
     "noImplicitThis": true,
     "noUnusedParameters": true,
@@ -12,10 +13,9 @@
     "strictNullChecks": false,
     "sourceMap": true,
     "declaration": false,
-    "downlevelIteration": true,
     "experimentalDecorators": true,
     "module": "es2020",
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "importHelpers": true,
     "target": "ES2022",
     "lib": [
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -23,7 +23,7 @@`
`23`	`23`	`"tslib": "^2.8.1"`
`24`	`24`	`},`
`25`	`25`	`"peerDependencies": {`
`26`		`- "@angular/common": "^19.1.4",`
`27`		`- "@angular/core": "^19.1.4"`
	`26`	`+ "@angular/common": "^19.0.0 \|\| ^20.0.0",`
	`27`	`+ "@angular/core": "^19.0.0 \|\| ^20.0.0"`
`28`	`28`	`}`
`29`	`29`	`}`
Original file line number	Diff line number	Diff line change
`@@ -176,7 +176,7 @@ export class CreditCard {`
`176`	`176`
`177`	`177`	`try {`
`178`	`178`	`cursor = target.selectionStart;`
`179`		`- } catch (error) {`
	`179`	`+ } catch {`
`180`	`180`	`// do nothing`
`181`	`181`	`}`
`182`	`182`