Upgrade to Angular 22

Author: bampakoa

.github/workflows/npm_publish.yml

@@ -12,7 +12,7 @@ jobs:
       - uses: actions/checkout@v4 # Updated to use v2
       - uses: actions/setup-node@v4 # Updated to use v3
         with:
-          node-version: 20
+          node-version: 24
           registry-url: 'https://registry.npmjs.org/' # Added for npm to configure auth
       - name: Install Angular CLI
         run: npm install -g @angular/cli @angular/core

package-lock.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"
   }
-}
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-wig",
-  "version": "21.0.0",
+  "version": "22.0.0",
   "description": "Light-weight WYSIWYG Editor for Angular",
   "keywords": [
     "Angular",
@@ -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/package.json

@@ -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-styles.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-filter.service.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.spec.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,10 +37,11 @@ import { NgxWigToolbarService } from "./ngx-wig-toolbar.service";
     },
   ],
   encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.Eager,
   standalone: false,
 })
 export class NgxWigComponent
-  implements OnInit, OnChanges, OnDestroy, ControlValueAccessor
+  implements OnInit, OnChanges, ControlValueAccessor
 {
   public readonly content = model<string>();
 
@@ -71,8 +73,6 @@ export class NgxWigComponent
   public readonly hasFocus = signal(false);
   public readonly toolbarButtonIndex = signal<number>(0);
 
-  private readonly _mutationObserver: MutationObserver;
-
   private readonly toolbarButtonElems = viewChildren("toolbarButton", {
     read: ElementRef,
   });
@@ -82,7 +82,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 {
@@ -159,12 +159,6 @@ export class NgxWigComponent
     }
   }
 
-  public ngOnDestroy(): void {
-    if (this._mutationObserver) {
-      this._mutationObserver.disconnect();
-    }
-  }
-
   public onContentChange(newContent: string): void {
     this.content.set(this.isInnerTextEmpty(newContent) ? "" : newContent);
 
@@ -385,12 +379,11 @@ export class NgxWigComponent
     target?.nativeElement.focus();
   }
 
-  private pasteHtmlAtCaret(html) {
-    let sel;
+  private pasteHtmlAtCaret(html: string) {
     let range;
 
     if (window.getSelection) {
-      sel = window.getSelection();
+      const sel = window.getSelection()!;
       if (sel.getRangeAt && sel.rangeCount) {
         range = sel.getRangeAt(0);
         range.deleteContents();

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

@@ -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.json

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