Angular 21 upgrade

README.md

@@ -33,6 +33,7 @@ npm install angular-cc-library --save
 
 | Angular | Library |
 |---------|---------|
+| 21.x    | 3.7.x   |
 | 20.x    | 3.6.x   |
 | 19.x    | 3.5.x   |
 | 18.x    | 3.4.x   |

angular.json

@@ -31,7 +31,8 @@
         "test": {
           "builder": "@angular-builders/jest:run",
           "options": {
-            "tsConfig": "tsconfig.spec.json"
+            "tsConfig": "tsconfig.spec.json",
+            "zoneless": false
           }
         },
         "lint": {

package.json

@@ -13,38 +13,39 @@
     "prepare": "husky"
   },
   "dependencies": {
-    "@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",
+    "@angular/common": "^21.2.19",
+    "@angular/compiler": "^21.2.19",
+    "@angular/core": "^21.2.19",
+    "@angular/forms": "^21.2.19",
+    "@angular/platform-browser": "^21.2.19",
+    "@angular/platform-browser-dynamic": "^21.2.19",
     "rxjs": "~7.8.1",
     "tslib": "^2.8.1",
     "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@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",
+    "@angular-builders/jest": "21",
+    "@angular-devkit/build-angular": "^21.2.19",
+    "@angular-eslint/builder": "21",
+    "@angular-eslint/eslint-plugin": "21",
+    "@angular-eslint/eslint-plugin-template": "21",
+    "@angular-eslint/schematics": "21",
+    "@angular-eslint/template-parser": "21",
+    "@angular/cli": "^21.2.19",
+    "@angular/compiler-cli": "^21.2.19",
+    "@angular/language-service": "^21.2.19",
     "@release-it/bumper": "^6.0.1",
     "@release-it/conventional-changelog": "^8.0.2",
-    "@types/jest": "^29.5.14",
+    "@types/jest": "30",
     "@types/node": "^22.13.1",
     "@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",
+    "jest": "30",
+    "jest-environment-jsdom": "30",
     "lint-staged": "^15.4.3",
-    "ng-packagr": "^20.3.2",
+    "ng-packagr": "21",
     "release-it": "^17.11.0",
     "ts-node": "~10.9.2",
     "typescript": "~5.9.3"

projects/angular-cc-library/package.json

@@ -1,6 +1,9 @@
 {
-  "name": "angular-cc-library",
-  "version": "3.5.1",
+  "name": "@ehsinc/angular-cc-library",
+  "version": "3.7.0-angular-21.0",
+  "publishConfig": {
+    "registry": "https://npm.pkg.github.com"
+  },
   "description": "angular credit card library",
   "keywords": [
     "angular",
@@ -23,7 +26,7 @@
     "tslib": "^2.8.1"
   },
   "peerDependencies": {
-    "@angular/common": "^19.0.0 || ^20.0.0",
-    "@angular/core": "^19.0.0 || ^20.0.0"
+    "@angular/common": "^19.0.0 || ^20.0.0 || ^21.0.0",
+    "@angular/core": "^19.0.0 || ^20.0.0 || ^21.0.0"
   }
 }

projects/angular-cc-library/src/lib/directives/credit-card-format.directive.spec.ts

@@ -100,7 +100,7 @@ describe('Directive: CreditCardFormat', () => {
       expect(inputEl.nativeElement.value).toBe('4111 1111 11');
       expect(inputEl.nativeElement.selectionStart).toBe(3);
       expect(inputEl.nativeElement.selectionEnd).toBe(3);
-      expect(event.preventDefault).toBeCalled();
+      expect(event.preventDefault).toHaveBeenCalled();
 
     }));
 
@@ -119,7 +119,7 @@ describe('Directive: CreditCardFormat', () => {
       expect(inputEl.nativeElement.value).toBe('4111 111');
       expect(inputEl.nativeElement.selectionStart).toBe(0);
       expect(inputEl.nativeElement.selectionEnd).toBe(0);
-      expect(event.preventDefault).toBeCalled();
+      expect(event.preventDefault).toHaveBeenCalled();
 
     }));
 
@@ -137,7 +137,7 @@ describe('Directive: CreditCardFormat', () => {
       expect(inputEl.nativeElement.value).toBe('4111 1111 111');
       expect(inputEl.nativeElement.selectionStart).toBe(13);
       expect(inputEl.nativeElement.selectionEnd).toBe(13);
-      expect(event.preventDefault).not.toBeCalled();
+      expect(event.preventDefault).not.toHaveBeenCalled();
 
     }));
   });

projects/angular-cc-library/tsconfig.lib.json

@@ -5,11 +5,7 @@
     "declarationMap": true,
     "declaration": true,
     "inlineSources": true,
-    "types": [],
-    "lib": [
-      "dom",
-      "es2018"
-    ]
+    "types": []
   },
   "angularCompilerOptions": {
     "skipTemplateCodegen": true,

projects/example/src/main.ts

@@ -1,4 +1,4 @@
-import { enableProdMode } from '@angular/core';
+import { enableProdMode, provideZoneChangeDetection } from '@angular/core';
 import { environment } from './environments/environment';
 import { AppComponent } from './app/app.component';
 import { bootstrapApplication } from '@angular/platform-browser';
@@ -7,5 +7,5 @@ if (environment.production) {
   enableProdMode();
 }
 
-bootstrapApplication(AppComponent)
+bootstrapApplication(AppComponent, {providers: [provideZoneChangeDetection()]})
   .catch(err => console.error(err));  

tsconfig.json

@@ -18,10 +18,6 @@
     "moduleResolution": "bundler",
     "importHelpers": true,
     "target": "ES2022",
-    "lib": [
-      "es2018",
-      "dom"
-    ],
     "paths": {
       "angular-cc-library/*": [
         "../angular-cc-library/src/*"