Angular v21.0 -> v22.0

README.md

@@ -53,6 +53,7 @@ npm install gramli-angular-notifier
 
 | Angular Notifier | Angular |
 | ---------------- | ------- |
+| `22.x`           | `22.x`  |
 | `21.x`           | `21.x`  |
 | `18.x`           | `20.x`  |
 | `17.x`           | `19.x`  |

package.json

@@ -1,7 +1,7 @@
 {
   "name": "gramli-angular-notifier",
   "description": "A well designed, fully animated, highly customizable, and easy-to-use notification library for your Angular application.",
-  "version": "21.1.0",
+  "version": "22.0.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -55,34 +55,34 @@
     "tslib": "2.8.x"
   },
   "devDependencies": {
-    "@angular/build": "^21.0.3",
-    "@angular/cli": "21.0.3",
-    "@angular/common": "21.0.5",
-    "@angular/compiler": "21.0.5",
-    "@angular/compiler-cli": "21.0.5",
-    "@angular/core": "21.0.5",
-    "@angular/platform-browser": "21.0.5",
-    "@angular/platform-browser-dynamic": "21.0.5",
+    "@angular/build": "^22.0.0",
+    "@angular/cli": "22.0.0",
+    "@angular/common": "22.0.0",
+    "@angular/compiler": "22.0.0",
+    "@angular/compiler-cli": "22.0.0",
+    "@angular/core": "22.0.0",
+    "@angular/platform-browser": "22.0.0",
+    "@angular/platform-browser-dynamic": "22.0.0",
     "@types/node": "25.0.1",
     "@types/web-animations-js": "2.2.x",
-    "@typescript-eslint/eslint-plugin": "8.49.x",
-    "@typescript-eslint/parser": "8.49.x",
+    "@typescript-eslint/eslint-plugin": "8.60.1",
+    "@typescript-eslint/parser": "8.60.1",
     "codecov": "^3.6.2",
     "copyfiles": "2.4.x",
     "eslint": "^9.0.0",
     "eslint-config-prettier": "10.1.x",
     "eslint-plugin-import": "2.32.x",
     "eslint-plugin-prettier": "5.5.x",
     "eslint-plugin-simple-import-sort": "12.1.x",
-    "jsdom": "^27.3.0",
-    "ng-packagr": "21.0.0",
+    "jsdom": "^29.1.1",
+    "ng-packagr": "22.0.0",
     "prettier": "3.7.x",
     "rimraf": "6.1.x",
     "rxjs": "7.8.x",
-    "sass": "^1.70.0",
+    "sass": "^1.100.0",
     "ts-node": "10.9.x",
-    "typescript": "^5.9.3",
-    "vitest": "^4.0.15",
-    "zone.js": "^0.16.0"
+    "typescript": "^6.0.3",
+    "vitest": "^4.1.8",
+    "zone.js": "^0.16.2"
   }
 }

projects/angular-notifier-demo/src/app/app.component.ts

@@ -1,4 +1,4 @@
-import { Component, ViewChild } from '@angular/core';
+import { ChangeDetectionStrategy, Component, TemplateRef, ViewChild } from '@angular/core';
 import { NotifierService } from 'angular-notifier';
 
 /**
@@ -11,10 +11,11 @@ import { NotifierService } from 'angular-notifier';
   selector: 'app',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
-  standalone: false
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
 })
 export class AppComponent {
-  @ViewChild('customTemplate', { static: true }) customNotificationTmpl;
+  @ViewChild('customTemplate', { static: true }) customNotificationTmpl!: TemplateRef<unknown>;
 
   /**
    * Notifier service

projects/angular-notifier-demo/src/app/app.module.ts

@@ -19,7 +19,7 @@ const customNotifierOptions: NotifierOptions = {
       gap: 10,
     },
   },
-  theme: 'material',
+  theme: 'primeng',
   behaviour: {
     autoHide: false,
     onClick: false,

projects/angular-notifier-demo/tsconfig.app.json

@@ -5,5 +5,14 @@
     "types": []
   },
   "files": ["src/main.ts", "src/polyfills.ts"],
-  "include": ["src/**/*.d.ts"]
+  "include": ["src/**/*.d.ts"],
+  "angularCompilerOptions": {
+    "extendedDiagnostics": {
+      "checks": {
+        "nullishCoalescingNotNullable": "suppress",
+        "optionalChainNotNullable": "suppress"
+      }
+    },
+    "strictTemplates": true
+  }
 }

projects/angular-notifier-standalone-demo/src/app/app.config.ts

@@ -17,7 +17,7 @@ export const appConfig: ApplicationConfig = {
           gap: 10,
         },
       },
-      theme: 'primeng',
+      theme: 'material',
     }),
   ],
 };

projects/angular-notifier-standalone-demo/src/app/app.ts

@@ -1,14 +1,15 @@
-import { Component, ViewChild } from '@angular/core';
+import { ChangeDetectionStrategy, Component, TemplateRef, ViewChild } from '@angular/core';
 import { NotifierModule, NotifierService } from 'angular-notifier';
 
 @Component({
   selector: 'app-root',
   imports: [NotifierModule],
   templateUrl: './app.html',
+  changeDetection: ChangeDetectionStrategy.Eager,
   styleUrl: './app.scss',
 })
 export class App {
-  @ViewChild('customTemplate', { static: true }) customNotificationTmpl;
+  @ViewChild('customTemplate', { static: true }) customNotificationTmpl!: TemplateRef<unknown>;
 
   /**
    * Notifier service

projects/angular-notifier-standalone-demo/tsconfig.app.json

@@ -6,10 +6,15 @@
     "outDir": "../../out-tsc/app",
     "types": []
   },
-  "include": [
-    "src/**/*.ts"
-  ],
-  "exclude": [
-    "src/**/*.spec.ts"
-  ]
+  "include": ["src/**/*.ts"],
+  "exclude": ["src/**/*.spec.ts"],
+  "angularCompilerOptions": {
+    "extendedDiagnostics": {
+      "checks": {
+        "nullishCoalescingNotNullable": "suppress",
+        "optionalChainNotNullable": "suppress"
+      }
+    },
+    "strictTemplates": true
+  }
 }

projects/angular-notifier/src/lib/components/notifier-container.component.ts

@@ -73,6 +73,7 @@ export class NotifierContainerComponent implements OnDestroy {
     this.queueService = notifierQueueService;
     this.config = notifierService.getConfig();
     this.notifications = [];
+    this.tempPromiseResolver = () => undefined;
 
     // Connects this component up to the action queue, then handle incoming actions
     this.queueServiceSubscription = this.queueService.actionStream.subscribe((action: NotifierAction) => {

projects/angular-notifier/src/lib/components/notifier-notification.component.spec.ts

@@ -1,4 +1,4 @@
-import { Component, DebugElement, Injectable, NO_ERRORS_SCHEMA, TemplateRef, ViewChild } from '@angular/core';
+import { Component, DebugElement, Injectable, NO_ERRORS_SCHEMA, TemplateRef, ViewChild, ChangeDetectionStrategy } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
@@ -1019,7 +1019,7 @@ class MockNotifierTimerService extends NotifierTimerService {
    *
    * @override
    */
-  private resolveFunction: () => void;
+  private resolveFunction: () => void = () => undefined;
 
   /**
    * Start (or resume) the timer - doing nothing here
@@ -1064,10 +1064,10 @@ class MockNotifierTimerService extends NotifierTimerService {
   }
 }
 
-@Component({ selector: 'test-cmp', template: '', standalone: false })
+@Component({ selector: 'test-cmp', template: '', changeDetection: ChangeDetectionStrategy.Eager, standalone: false })
 class TestComponent {
   @ViewChild('tpl', { static: true })
-  currentTplRef: TemplateRef<any>;
+  currentTplRef!: TemplateRef<any>;
 }
 
 function createTestComponent(template: string): ComponentFixture<TestComponent> {

projects/angular-notifier/src/lib/components/notifier-notification.component.ts

@@ -37,7 +37,7 @@ export class NotifierNotificationComponent implements AfterViewInit {
    * Input: Notification object, contains all details necessary to construct the notification
    */
   @Input()
-  public notification: NotifierNotification;
+  public notification!: NotifierNotification;
 
   /**
    * Output: Ready event, handles the initialization success by emitting a reference to this notification component
@@ -114,6 +114,8 @@ export class NotifierNotificationComponent implements AfterViewInit {
     this.animationService = notifierAnimationService;
     this.renderer = renderer;
     this.element = elementRef.nativeElement;
+    this.elementHeight = 0;
+    this.elementWidth = 0;
     this.elementShift = 0;
   }
 

projects/angular-notifier/src/lib/models/notifier-notification.model.ts

@@ -27,27 +27,26 @@ export class NotifierNotification {
    * The template to customize
    * the appearance of the notification
    */
-  public template?: TemplateRef<any> = null;
+  public template?: TemplateRef<any>;
 
   /**
    * Component reference of this notification, created and set during creation time
    */
-  public component: NotifierNotificationComponent;
+  public component!: NotifierNotificationComponent;
 
   /**
    * Constructor
    *
    * @param options Notifier options
    */
   public constructor(options: NotifierNotificationOptions) {
-    Object.assign(this, options);
-
     // If not set manually, we have to create a unique notification ID by ourselves. The ID generation relies on the current browser
     // datetime in ms, in praticular the moment this notification gets constructed. Concurrency, and thus two IDs being the exact same,
     // is not possible due to the action queue concept.
-    if (options.id === undefined) {
-      this.id = `ID_${new Date().getTime()}`;
-    }
+    this.id = options.id ?? `ID_${new Date().getTime()}`;
+    this.type = options.type;
+    this.message = options.message;
+    this.template = options.template;
   }
 }
 

projects/angular-notifier/src/lib/services/notifier-queue.service.ts

@@ -66,6 +66,11 @@ export class NotifierQueueService {
       return; // Skip (the queue can now go drink a coffee as it has nothing to do anymore)
     }
     this.isActionInProgress = true;
-    this.actionStream.next(this.actionQueue.shift()); // Push next action to the stream, and remove the current action from the queue
+    const nextAction: NotifierAction | undefined = this.actionQueue.shift();
+    if (nextAction === undefined) {
+      this.isActionInProgress = false;
+      return;
+    }
+    this.actionStream.next(nextAction); // Push next action to the stream, and remove the current action from the queue
   }
 }

projects/angular-notifier/src/lib/services/notifier-timer.service.spec.ts

@@ -101,12 +101,12 @@ class MockDate extends Date {
   /**
    * Start time (at init)
    */
-  private startTime: number;
+  private startTime: number = new Date().getTime();
 
   /**
    * Elapsed time (since init)
    */
-  private elapsedTime: number;
+  private elapsedTime: number = 0;
 
   /**
    * Fast-forward the current time manually

projects/angular-notifier/src/lib/services/notifier-timer.service.ts

@@ -34,6 +34,8 @@ export class NotifierTimerService {
   public constructor() {
     this.now = 0;
     this.remaining = 0;
+    this.timerId = 0;
+    this.finishPromiseResolver = () => undefined;
   }
 
   /**

projects/angular-notifier/src/lib/services/notifier.service.spec.ts

@@ -193,7 +193,7 @@ class MockNotifierQueueService extends NotifierQueueService {
   /**
    * Last action
    */
-  public lastAction: NotifierAction;
+  public lastAction!: NotifierAction;
   public actionStream = new Subject<NotifierAction>();
 
   /**

projects/angular-notifier/tsconfig.lib.json

@@ -9,8 +9,15 @@
   },
   "angularCompilerOptions": {
     "skipTemplateCodegen": true,
+    "extendedDiagnostics": {
+      "checks": {
+        "nullishCoalescingNotNullable": "suppress",
+        "optionalChainNotNullable": "suppress"
+      }
+    },
     "strictMetadataEmit": true,
-    "enableResourceInlining": true
+    "enableResourceInlining": true,
+    "strictTemplates": true
   },
   "exclude": ["src/test.ts", "**/*.spec.ts"]
 }

projects/angular-notifier/tsconfig.lib.prod.json

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

projects/angular-notifier/tsconfig.spec.json

@@ -5,5 +5,14 @@
     "target": "es2022",
     "types": ["vitest/globals", "node"]
   },
-  "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
-}
+  "include": ["src/**/*.spec.ts", "src/**/*.d.ts"],
+  "angularCompilerOptions": {
+    "extendedDiagnostics": {
+      "checks": {
+        "nullishCoalescingNotNullable": "suppress",
+        "optionalChainNotNullable": "suppress"
+      }
+    },
+    "strictTemplates": true
+  }
+}

tsconfig.json

@@ -2,7 +2,9 @@
   "compileOnSave": false,
   "compilerOptions": {
     "baseUrl": "./",
+    "ignoreDeprecations": "6.0",
     "outDir": "./dist/out-tsc",
+    "rootDir": "./projects",
     "sourceMap": true,
     "esModuleInterop": true,
     "declaration": false,
@@ -20,7 +22,6 @@
     "useDefineForClassFields": false
   },
   "angularCompilerOptions": {
-    "fullTemplateTypeCheck": true,
     "strictInjectionParameters": true
   }
 }