feat: add compatibility with Angular 21

medbenmakhlouf · web-flow · commit 3aaf9e6c48a7 · 2025-11-21T17:41:40.000+01:00
This adds support for Angular 21 and removes support for all previous versions. fixes #122 BREAKING CHANGE: Angular v21 is now required as peer dependency
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -36,36 +36,34 @@
     "dev:ng-add": "npm run build:lib && npm link ./dist/ngx-matomo-client && ng add ngx-matomo-client --project demo"
   },
   "dependencies": {
-    "@angular/animations": "^20.0.1",
-    "@angular/cdk": "^20.0.2",
-    "@angular/common": "^20.0.1",
-    "@angular/compiler": "^20.0.1",
-    "@angular/core": "^20.0.1",
-    "@angular/forms": "^20.0.1",
-    "@angular/material": "^20.0.2",
-    "@angular/platform-browser": "^20.0.1",
-    "@angular/platform-browser-dynamic": "^20.0.1",
-    "@angular/router": "^20.0.1",
+    "@angular/cdk": "^21.0.0",
+    "@angular/common": "^21.0.0",
+    "@angular/compiler": "^21.0.0",
+    "@angular/core": "^21.0.0",
+    "@angular/forms": "^21.0.0",
+    "@angular/material": "^21.0.0",
+    "@angular/platform-browser": "^21.0.0",
+    "@angular/router": "^21.0.0",
     "rxjs": "~7.5.5",
     "tslib": "^2.8.1",
     "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@angular-devkit/core": "^20.0.2",
-    "@angular-devkit/schematics": "^20.0.2",
-    "@angular/build": "^20.0.1",
-    "@angular/cli": "^20.0.1",
-    "@angular/compiler-cli": "^20.0.1",
+    "@angular-devkit/core": "^21.0.0",
+    "@angular-devkit/schematics": "^21.0.0",
+    "@angular/build": "^21.0.0",
+    "@angular/cli": "^21.0.0",
+    "@angular/compiler-cli": "^21.0.0",
     "@commitlint/cli": "^19.6.1",
     "@commitlint/config-conventional": "^19.6.0",
-    "@schematics/angular": "^20.0.2",
+    "@schematics/angular": "^21.0.0",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/exec": "^7.1.0",
     "@semantic-release/git": "^10.0.1",
     "@types/jasmine": "~4.6.4",
     "@types/ncp": "^2.0.8",
     "@types/node": "^22.10.5",
-    "angular-eslint": "^20.0.0",
+    "angular-eslint": "^20.6.0",
     "cheerio": "^1.0.0",
     "compare-func": "^2.0.0",
     "eslint": "^9.28.0",
@@ -84,15 +82,15 @@
     "markdown-toc": "^1.2.0",
     "ncp": "^2.0.0",
     "nerf-dart": "^1.0.0",
-    "ng-packagr": "^20.0.0",
+    "ng-packagr": "^21.0.0",
     "node-fetch": "^3.3.2",
     "prettier": "3.5.3",
     "protractor": "~7.0.0",
     "semantic-release": "^24.2.5",
     "semver": "^7.7.2",
     "ts-node": "~10.9.2",
-    "typescript": "~5.8.3",
-    "typescript-eslint": "^8.33.1"
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.39.1"
   },
   "private": true,
   "repository": {
diff --git a/projects/demo/src/app/track-event-component/track-event-component.component.spec.ts b/projects/demo/src/app/track-event-component/track-event-component.component.spec.ts
@@ -1,6 +1,5 @@
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { provideMatomoTesting } from 'ngx-matomo-client/testing';
 import { TrackEventComponentComponent } from './track-event-component.component';
 
@@ -10,7 +9,7 @@ describe('TrackEventComponentComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [BrowserAnimationsModule, TrackEventComponentComponent],
+      imports: [TrackEventComponentComponent],
       providers: [
         provideMatomoTesting({
           trackerUrl: '',
diff --git a/projects/demo/src/app/track-event-template/track-event-template.component.spec.ts b/projects/demo/src/app/track-event-template/track-event-template.component.spec.ts
@@ -1,6 +1,5 @@
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { provideMatomoTesting } from 'ngx-matomo-client/testing';
 import { TrackEventTemplateComponent } from './track-event-template.component';
 
@@ -10,7 +9,7 @@ describe('TrackEventTemplateComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [BrowserAnimationsModule, TrackEventTemplateComponent],
+      imports: [TrackEventTemplateComponent],
       providers: [
         provideMatomoTesting({
           trackerUrl: '',
diff --git a/projects/demo/src/app/track-page-view-without-router/track-page-view-without-router.component.spec.ts b/projects/demo/src/app/track-page-view-without-router/track-page-view-without-router.component.spec.ts
@@ -1,6 +1,5 @@
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { provideMatomoTesting } from 'ngx-matomo-client/testing';
 import { TrackPageViewWithoutRouterComponent } from './track-page-view-without-router.component';
 
@@ -10,7 +9,7 @@ describe('TrackPageViewWithoutRouterComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [BrowserAnimationsModule, TrackPageViewWithoutRouterComponent],
+      imports: [TrackPageViewWithoutRouterComponent],
       providers: [
         provideMatomoTesting({
           trackerUrl: '',
diff --git a/projects/demo/src/app/track-simple-click-event/track-simple-click-event.component.spec.ts b/projects/demo/src/app/track-simple-click-event/track-simple-click-event.component.spec.ts
@@ -1,6 +1,5 @@
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { provideMatomoTesting } from 'ngx-matomo-client/testing';
 import { TrackSimpleClickEventComponent } from './track-simple-click-event.component';
 
@@ -10,7 +9,7 @@ describe('TrackSimpleClickEventComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [BrowserAnimationsModule, TrackSimpleClickEventComponent],
+      imports: [TrackSimpleClickEventComponent],
       providers: [
         provideMatomoTesting({
           trackerUrl: '',
diff --git a/projects/demo/src/main.ts b/projects/demo/src/main.ts
@@ -1,12 +1,11 @@
-import { enableProdMode, importProvidersFrom } from '@angular/core';
+import { enableProdMode, importProvidersFrom, provideZoneChangeDetection } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatTabsModule } from '@angular/material/tabs';
 import { bootstrapApplication, BrowserModule } from '@angular/platform-browser';
-import { provideAnimations } from '@angular/platform-browser/animations';
 import { provideMatomo, withRouter } from 'ngx-matomo-client';
 import { AppRoutingModule } from './app/app-routing.module';
 import { AppComponent } from './app/app.component';
@@ -19,6 +18,7 @@ if (environment.production) {
 
 bootstrapApplication(AppComponent, {
   providers: [
+    provideZoneChangeDetection(),
     importProvidersFrom(
       BrowserModule,
       FormsModule,
@@ -29,7 +29,6 @@ bootstrapApplication(AppComponent, {
       MatButtonModule,
       MatIconModule,
     ),
-    provideAnimations(),
     provideMatomo(
       {
         siteId: environment.matomoSiteId,
diff --git a/projects/demo/src/test.ts b/projects/demo/src/test.ts
@@ -2,10 +2,7 @@
 
 import 'zone.js/testing';
 import { getTestBed } from '@angular/core/testing';
-import {
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting,
-} from '@angular/platform-browser-dynamic/testing';
+import { BrowserTestingModule, platformBrowserTesting } from '@angular/platform-browser/testing';
 
 // First, initialize the Angular testing environment.
-getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
+getTestBed().initTestEnvironment(BrowserTestingModule, platformBrowserTesting());
diff --git a/projects/ngx-matomo-client/core/directives/matomo-opt-out-form.component.spec.ts b/projects/ngx-matomo-client/core/directives/matomo-opt-out-form.component.spec.ts
@@ -1,4 +1,4 @@
-import { Component, LOCALE_ID } from '@angular/core';
+import { Component, LOCALE_ID, provideZoneChangeDetection } from '@angular/core';
 import { fakeAsync, flush, TestBed } from '@angular/core/testing';
 import { By, DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
 import { provideMatomo } from '../providers';
@@ -100,6 +100,7 @@ describe('MatomoOptOutFormComponent', () => {
       imports: [MatomoOptOutFormComponent],
       providers: [
         provideMatomo({ siteId: 1, trackerUrl: 'http://localhost' }),
+        provideZoneChangeDetection(),
         provideTestingTracker(),
         {
           provide: LOCALE_ID,
diff --git a/projects/ngx-matomo-client/core/directives/matomo-track-click.directive.spec.ts b/projects/ngx-matomo-client/core/directives/matomo-track-click.directive.spec.ts
@@ -1,4 +1,4 @@
-import { Component, ElementRef, ViewChild } from '@angular/core';
+import { Component, ElementRef, provideZoneChangeDetection, ViewChild } from '@angular/core';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { MatomoTracker } from '../tracker/matomo-tracker.service';
 import { MatomoTrackClickDirective } from './matomo-track-click.directive';
@@ -35,6 +35,7 @@ describe('MatomoTrackClickDirective', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       providers: [
+        provideZoneChangeDetection(),
         {
           provide: MatomoTracker,
           useValue: jasmine.createSpyObj<MatomoTracker>('MatomoTracker', ['trackEvent']),
diff --git a/projects/ngx-matomo-client/core/directives/matomo-tracker.directive.spec.ts b/projects/ngx-matomo-client/core/directives/matomo-tracker.directive.spec.ts
@@ -1,4 +1,4 @@
-import { Component, ElementRef, Type, ViewChild } from '@angular/core';
+import { Component, ElementRef, provideZoneChangeDetection, Type, ViewChild } from '@angular/core';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { MatomoTracker } from '../tracker/matomo-tracker.service';
 import { MatomoTrackerDirective, TrackArgs } from './matomo-tracker.directive';
@@ -98,6 +98,7 @@ describe('MatomoTrackerDirective', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       providers: [
+        provideZoneChangeDetection(),
         {
           provide: MatomoTracker,
           useValue: jasmine.createSpyObj<MatomoTracker>('MatomoTracker', ['trackEvent']),
diff --git a/projects/ngx-matomo-client/core/tracker/matomo-tracker.service.ts b/projects/ngx-matomo-client/core/tracker/matomo-tracker.service.ts
@@ -104,7 +104,9 @@ export interface MatomoInstance {
 
 @Injectable()
 export class MatomoTracker {
-  private readonly delegate: InternalMatomoTracker<MatomoInstance> = inject(InternalMatomoTracker);
+  private readonly delegate: InternalMatomoTracker<MatomoInstance> = inject(
+    InternalMatomoTracker<MatomoInstance>,
+  );
 
   private readonly _pageViewTracked = new Subject<void>();
 
diff --git a/projects/ngx-matomo-client/form-analytics/directives/track-form-field.directive.spec.ts b/projects/ngx-matomo-client/form-analytics/directives/track-form-field.directive.spec.ts
@@ -1,4 +1,4 @@
-import { Component, ElementRef, ViewChild } from '@angular/core';
+import { Component, ElementRef, provideZoneChangeDetection, ViewChild } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { MatomoFormAnalytics } from '../matomo-form-analytics.service';
 import { TrackFormFieldDirective } from './track-form-field.directive';
@@ -37,6 +37,7 @@ describe('TrackFormFieldDirective', () => {
     await TestBed.configureTestingModule({
       imports: [HostComponent, InvalidHostComponent, TrackFormDirective, TrackFormFieldDirective],
       providers: [
+        provideZoneChangeDetection(),
         {
           provide: MatomoFormAnalytics,
           useValue: jasmine.createSpyObj<MatomoFormAnalytics>('MatomoFormAnalytics', [
diff --git a/projects/ngx-matomo-client/form-analytics/directives/track-form-submit.directive.spec.ts b/projects/ngx-matomo-client/form-analytics/directives/track-form-submit.directive.spec.ts
@@ -1,4 +1,4 @@
-import { Component, ElementRef, ViewChild } from '@angular/core';
+import { Component, ElementRef, provideZoneChangeDetection, ViewChild } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { MatomoFormAnalytics } from '../matomo-form-analytics.service';
 import { TrackFormFieldDirective } from './track-form-field.directive';
@@ -40,6 +40,7 @@ describe('TrackFormSubmitDirective', () => {
     await TestBed.configureTestingModule({
       imports: [HostComponent, InvalidHostComponent, TrackFormDirective, TrackFormFieldDirective],
       providers: [
+        provideZoneChangeDetection(),
         {
           provide: MatomoFormAnalytics,
           useValue: jasmine.createSpyObj<MatomoFormAnalytics>('MatomoFormAnalytics', [
diff --git a/projects/ngx-matomo-client/form-analytics/directives/track-form.directive.spec.ts b/projects/ngx-matomo-client/form-analytics/directives/track-form.directive.spec.ts
@@ -1,4 +1,4 @@
-import { Component, ElementRef, ViewChild } from '@angular/core';
+import { Component, ElementRef, provideZoneChangeDetection, ViewChild } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { MatomoFormAnalytics } from '../matomo-form-analytics.service';
 import { TrackFormDirective } from './track-form.directive';
@@ -35,6 +35,7 @@ describe('TrackFormDirective', () => {
     await TestBed.configureTestingModule({
       imports: [HostComponent, TrackFormDirective],
       providers: [
+        provideZoneChangeDetection(),
         {
           provide: MatomoFormAnalytics,
           useValue: jasmine.createSpyObj<MatomoFormAnalytics>('MatomoFormAnalytics', [
diff --git a/projects/ngx-matomo-client/form-analytics/matomo-form-analytics.service.ts b/projects/ngx-matomo-client/form-analytics/matomo-form-analytics.service.ts
@@ -13,7 +13,7 @@ export interface MatomoFormAnalyticsInstance {
 @Injectable()
 export class MatomoFormAnalytics {
   private readonly delegate: InternalMatomoTracker<MatomoFormAnalyticsInstance, 'FormAnalytics::'> =
-    inject(InternalMatomoTracker);
+    inject(InternalMatomoTracker<MatomoFormAnalyticsInstance>);
 
   disableFormAnalytics(): void {
     this.delegate.push(['FormAnalytics::disableFormAnalytics']);
diff --git a/projects/ngx-matomo-client/package.json b/projects/ngx-matomo-client/package.json
@@ -10,8 +10,8 @@
     "analytics"
   ],
   "peerDependencies": {
-    "@angular/common": "^20.0.0",
-    "@angular/core": "^20.0.0"
+    "@angular/common": "^21.0.0",
+    "@angular/core": "^21.0.0"
   },
   "dependencies": {},
   "repository": {
diff --git a/projects/ngx-matomo-client/test.ts b/projects/ngx-matomo-client/test.ts
@@ -3,10 +3,7 @@
 import 'zone.js';
 import 'zone.js/testing';
 import { getTestBed } from '@angular/core/testing';
-import {
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting,
-} from '@angular/platform-browser-dynamic/testing';
+import { BrowserTestingModule, platformBrowserTesting } from '@angular/platform-browser/testing';
 
 // First, initialize the Angular testing environment.
-getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
+getTestBed().initTestEnvironment(BrowserTestingModule, platformBrowserTesting());
diff --git a/projects/ngx-matomo-client/tsconfig.lib.json b/projects/ngx-matomo-client/tsconfig.lib.json
@@ -5,8 +5,7 @@
     "declaration": true,
     "declarationMap": true,
     "inlineSources": true,
-    "types": [],
-    "lib": ["dom", "es2019"]
+    "types": []
   },
   "angularCompilerOptions": {
     "skipTemplateCodegen": true,
diff --git a/tsconfig.json b/tsconfig.json
@@ -16,7 +16,6 @@
     "importHelpers": true,
     "target": "ES2022",
     "module": "es2020",
-    "lib": ["es2019", "dom"],
     "paths": {
       "ngx-matomo-client": ["dist/ngx-matomo-client"],
       "ngx-matomo-client/*": ["dist/ngx-matomo-client/*"]
