Upgrade to Angular 22

package.json

@@ -12,23 +12,23 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^21.0.0",
-    "@angular/common": "^21.0.0",
-    "@angular/compiler": "^21.0.0",
-    "@angular/core": "^21.0.0",
-    "@angular/forms": "^21.0.0",
-    "@angular/platform-browser": "^21.0.0",
-    "@angular/platform-browser-dynamic": "^21.0.0",
-    "@angular/router": "^21.0.0",
+    "@angular/animations": "^22.0.0",
+    "@angular/common": "^22.0.0",
+    "@angular/compiler": "^22.0.0",
+    "@angular/core": "^22.0.0",
+    "@angular/forms": "^22.0.0",
+    "@angular/platform-browser": "^22.0.0",
+    "@angular/platform-browser-dynamic": "^22.0.0",
+    "@angular/router": "^22.0.0",
     "core-js": "^3.19.3",
     "rxjs": "^6.5.5",
     "tslib": "^2.2.0",
     "zone.js": "^0.15.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^21.0.0",
-    "@angular/cli": "^21.1.4",
-    "@angular/compiler-cli": "^21.0.0",
+    "@angular-devkit/build-angular": "^22.0.0",
+    "@angular/cli": "^22.0.0",
+    "@angular/compiler-cli": "^22.0.0",
     "@types/jasmine": "^5.1.4",
     "@types/node": "^20.10.5",
     "@typescript-eslint/eslint-plugin": "5.36.2",
@@ -37,15 +37,16 @@
     "eslint-plugin-import": "latest",
     "eslint-plugin-jsdoc": "latest",
     "eslint-plugin-prefer-arrow": "latest",
+    "istanbul-lib-instrument": "^6.0.3",
     "jasmine-core": "^5.1.1",
     "jasmine-spec-reporter": "^7.0.0",
     "karma": "^6.4.2",
     "karma-chrome-launcher": "^3.2.0",
     "karma-coverage-istanbul-reporter": "^3.0.3",
     "karma-jasmine": "^5.1.0",
     "karma-jasmine-html-reporter": "^2.1.0",
-    "ng-packagr": "^21.1.0",
+    "ng-packagr": "^22.0.0-rc.0",
     "ts-node": "^1.7.1",
-    "typescript": "^5.9.3"
+    "typescript": "^6.0.3"
   }
-}
+}

projects/ngx-wig/package.json

@@ -14,9 +14,9 @@
   },
   "homepage": "https://github.com/stevermeister/ngx-wig",
   "peerDependencies": {
-    "@angular/common": "^21.0.0",
-    "@angular/core": "^21.0.0",
-    "@angular/forms": "^21.0.0"
+    "@angular/common": "^22.0.0",
+    "@angular/core": "^22.0.0",
+    "@angular/forms": "^22.0.0"
   },
   "dependencies": {
     "tslib": "^2.2.0"

projects/ngx-wig/src/lib/ngx-wig-filter-styles.service.ts

@@ -1,8 +1,6 @@
-import { Injectable } from "@angular/core";
+import { Service } from "@angular/core";
 
-@Injectable({
-  providedIn: "root",
-})
+@Service()
 export class NgxWigFilterStylesService {
   constructor() {}
   public filter(htmlString: string): string {

projects/ngx-wig/src/lib/ngx-wig-filter.service.ts

@@ -1,8 +1,6 @@
-import { Injectable } from '@angular/core';
+import { Service } from '@angular/core';
 
-@Injectable({
-  providedIn: 'root'
-})
+@Service()
 export class NgxWigFilterService {
   constructor() {}
   public filter(content: string): string {
@@ -57,7 +55,7 @@ export class NgxWigFilterService {
   // --- Helper: Mark underlined spans by class or inline style ---
   private _markUnderlineSpans(html: string, underlineClasses: string[]): string {
     if (underlineClasses.length > 0) {
-      html = html.replace(/<span([^>]*)class=["']([^"']+)["']([^>]*)>([\s\S]*?)<\/span>/gi, (match, p1, classAttr, p3, content) => {
+      html = html.replace(/<span([^>]*)class=["']([^"']+)["']([^>]*)>([\s\S]*?)<\/span>/gi, (match, p1, classAttr: string, p3, content) => {
         const classes = classAttr.split(/\s+/);
         if (classes.some(cls => underlineClasses.includes(cls)) && classes.every(cls => underlineClasses.includes(cls) || cls === 's2' || cls === 's3')) {
           return `<u>${content}</u>`;

projects/ngx-wig/src/lib/ngx-wig.component.spec.ts

@@ -1,4 +1,4 @@
-import { Component, signal, ViewChild } from '@angular/core';
+import { Component, signal, ViewChild, ChangeDetectionStrategy } from '@angular/core';
 import { ComponentFixture, fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing';
 import { FormsModule } from '@angular/forms';
 
@@ -12,6 +12,7 @@ const mockWindow = {};
     template: `<ngx-wig
     [(ngModel)]="text">
   </ngx-wig>`,
+    changeDetection: ChangeDetectionStrategy.Eager,
     standalone: false
 })
 class TestNgModelHostComponent {
@@ -27,6 +28,7 @@ class TestNgModelHostComponent {
     buttons="bold,italic"
     [disabled]="false">
   </ngx-wig>`,
+    changeDetection: ChangeDetectionStrategy.Eager,
     standalone: false
 })
 class TestHostComponent {

projects/ngx-wig/src/lib/ngx-wig.component.ts

@@ -16,6 +16,7 @@ import {
   signal,
   viewChild,
   viewChildren,
+  ChangeDetectionStrategy
 } from "@angular/core";
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
 import { CommandFunction, TButton } from "./config";
@@ -36,6 +37,7 @@ import { NgxWigToolbarService } from "./ngx-wig-toolbar.service";
     },
   ],
   encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.Eager,
   standalone: false,
 })
 export class NgxWigComponent
@@ -71,7 +73,7 @@ export class NgxWigComponent
   public readonly hasFocus = signal(false);
   public readonly toolbarButtonIndex = signal<number>(0);
 
-  private readonly _mutationObserver: MutationObserver;
+  private readonly _mutationObserver!: MutationObserver;
 
   private readonly toolbarButtonElems = viewChildren("toolbarButton", {
     read: ElementRef,
@@ -82,7 +84,7 @@ export class NgxWigComponent
     @Optional() private readonly _filterService: NgxWigFilterService,
     // cannot set Document here - Angular issue - https://github.com/angular/angular/issues/20351
     @Inject(DOCUMENT) private readonly document: Document,
-    @Inject("WINDOW") private readonly window,
+    @Inject("WINDOW") private readonly window: Window,
   ) {}
 
   private executeCommand(command: string, value: string = ""): boolean {
@@ -385,12 +387,12 @@ export class NgxWigComponent
     target?.nativeElement.focus();
   }
 
-  private pasteHtmlAtCaret(html) {
-    let sel;
+  private pasteHtmlAtCaret(html: string) {
+    let sel: Selection;
     let range;
 
     if (window.getSelection) {
-      sel = window.getSelection();
+      sel = window.getSelection()!;
       if (sel.getRangeAt && sel.rangeCount) {
         range = sel.getRangeAt(0);
         range.deleteContents();

projects/ngx-wig/tsconfig.lib.json

@@ -15,6 +15,12 @@
   "angularCompilerOptions": {
     "skipTemplateCodegen": true,
     "strictMetadataEmit": true,
+    "extendedDiagnostics": {
+      "checks": {
+        "nullishCoalescingNotNullable": "suppress",
+        "optionalChainNotNullable": "suppress"
+      }
+    },
     "fullTemplateTypeCheck": true,
     "strictInjectionParameters": true,
     "enableResourceInlining": true

projects/ngx-wig/tsconfig.lib.prod.json

@@ -4,6 +4,12 @@
     "declarationMap": false
   },
   "angularCompilerOptions": {
-    "compilationMode": "partial"
+    "compilationMode": "partial",
+    "extendedDiagnostics": {
+      "checks": {
+        "nullishCoalescingNotNullable": "suppress",
+        "optionalChainNotNullable": "suppress"
+      }
+    }
   }
 }

projects/ngx-wig/tsconfig.spec.json

@@ -13,5 +13,13 @@
   "include": [
     "**/*.spec.ts",
     "**/*.d.ts"
-  ]
+  ],
+  "angularCompilerOptions": {
+    "extendedDiagnostics": {
+      "checks": {
+        "nullishCoalescingNotNullable": "suppress",
+        "optionalChainNotNullable": "suppress"
+      }
+    }
+  }
 }

src/app/app.component.ts

@@ -1,11 +1,12 @@
-import { Component, ViewEncapsulation } from '@angular/core';
+import { Component, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core';
 import { FormControl } from '@angular/forms';
 
 @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.css'],
     encapsulation: ViewEncapsulation.None,
+    changeDetection: ChangeDetectionStrategy.Eager,
     standalone: false
 })
 export class AppComponent {

src/tsconfig.app.json

@@ -10,5 +10,13 @@
   ],
   "include": [
     "src/**/*.d.ts"
-  ]
+  ],
+  "angularCompilerOptions": {
+    "extendedDiagnostics": {
+      "checks": {
+        "nullishCoalescingNotNullable": "suppress",
+        "optionalChainNotNullable": "suppress"
+      }
+    }
+  }
 }

src/tsconfig.spec.json

@@ -14,5 +14,13 @@
   "include": [
     "**/*.spec.ts",
     "**/*.d.ts"
-  ]
+  ],
+  "angularCompilerOptions": {
+    "extendedDiagnostics": {
+      "checks": {
+        "nullishCoalescingNotNullable": "suppress",
+        "optionalChainNotNullable": "suppress"
+      }
+    }
+  }
 }

tsconfig.json

@@ -17,7 +17,8 @@
       "ngx-wig": ["dist/ngx-wig"],
       "ngx-wig/*": ["dist/ngx-wig/*"]
     },
-    "useDefineForClassFields": false
+    "useDefineForClassFields": false,
+    "ignoreDeprecations": "6.0"
   },
   "angularCompilerOptions": {
     "enableI18nLegacyMessageIdFormat": false,