chore: upgrade to Angular v21 (#2)

Author: GODrums

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-angular-query-builder",
-  "version": "20.0.0",
+  "version": "21.0.0",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
@@ -17,24 +17,24 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^20.0.6",
-    "@angular/cdk": "^20.0.5",
-    "@angular/common": "^20.0.6",
-    "@angular/compiler": "~20.0.6",
-    "@angular/core": "^20.0.6",
-    "@angular/forms": "^20.0.6",
-    "@angular/material": "^20.0.5",
-    "@angular/platform-browser": "^20.0.6",
-    "@angular/platform-browser-dynamic": "^20.0.6",
-    "@angular/router": "^20.0.6",
-    "rxjs": "7.8.1",
+    "@angular/animations": "^21.1.3",
+    "@angular/cdk": "^21.1.3",
+    "@angular/common": "^21.1.3",
+    "@angular/compiler": "~21.1.3",
+    "@angular/core": "^21.1.3",
+    "@angular/forms": "^21.1.3",
+    "@angular/material": "^21.1.3",
+    "@angular/platform-browser": "^21.1.3",
+    "@angular/platform-browser-dynamic": "^21.1.3",
+    "@angular/router": "^21.1.3",
+    "rxjs": "^7.8.2",
     "tslib": "2.6.2",
-    "zone.js": "~0.15.1"
+    "zone.js": "~0.16.0"
   },
   "devDependencies": {
-    "@angular/build": "^20.0.5",
-    "@angular/cli": "^20.0.5",
-    "@angular/compiler-cli": "^20.0.6",
+    "@angular/build": "^21.1.3",
+    "@angular/cli": "^21.1.3",
+    "@angular/compiler-cli": "^21.1.3",
     "@types/jasmine": "5.1.4",
     "@types/node": "20.10.5",
     "jasmine-core": "5.1.1",
@@ -45,7 +45,7 @@
     "karma-jasmine": "5.1.0",
     "karma-jasmine-html-reporter": "2.1.0",
     "karma-spec-reporter": "^0.0.36",
-    "ng-packagr": "20.0.1",
-    "typescript": "5.8.3"
+    "ng-packagr": "21.1.0",
+    "typescript": "5.9.3"
   }
-}
+}

package.json

@@ -1,4 +1,4 @@
-import { NgModule } from "@angular/core";
+import { NgModule, provideZoneChangeDetection } from "@angular/core";
 import { FormsModule, ReactiveFormsModule } from "@angular/forms";
 import { MatButtonModule } from "@angular/material/button";
 import { MatCardModule } from "@angular/material/card";
@@ -36,7 +36,7 @@ import { AppComponent } from "./app.component";
     BrowserAnimationsModule,
     NgxAngularQueryBuilderModule
   ],
-  providers: [],
+  providers: [provideZoneChangeDetection()],
   bootstrap: [AppComponent]
 })
 export class AppModule {}

projects/demo/src/app/app.module.ts

@@ -3,11 +3,11 @@
 import "zone.js/testing";
 import { getTestBed } from "@angular/core/testing";
 import {
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting
-} from "@angular/platform-browser-dynamic/testing";
+  BrowserTestingModule,
+  platformBrowserTesting
+} from "@angular/platform-browser/testing";
 
 // First, initialize the Angular testing environment.
-getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting(), {
+getTestBed().initTestEnvironment(BrowserTestingModule, platformBrowserTesting(), {
   teardown: { destroyAfterEach: true }
 });

projects/demo/src/test.ts

@@ -61,3 +61,7 @@
 ### 20.0.0
 
 - Support Angular 20
+
+### 21.0.0
+
+- Support Angular 21

projects/ngx-angular-query-builder/CHANGELOG.md

@@ -1,6 +1,6 @@
 {
   "name": "@csfloat/ngx-angular-query-builder",
-  "version": "20.0.0",
+  "version": "21.0.0",
   "description": "Port of angular2-query-builder from github.com/designermanjeets/Angular-QueryBuilder in order to support angular 12+",
   "license": "MIT",
   "repository": {
@@ -26,10 +26,10 @@
     "access": "public"
   },
   "peerDependencies": {
-    "@angular/common": "^20.0.6",
-    "@angular/core": "^20.0.6"
+    "@angular/common": "^21.1.3",
+    "@angular/core": "^21.1.3"
   },
   "dependencies": {
     "tslib": "^2.6.2"
   }
-}
+}

projects/ngx-angular-query-builder/package.json

@@ -120,7 +120,7 @@
                       </button>
                     </div>
                   }
-                  @if (entities?.length) {
+                  @if (entities && entities.length) {
                     <div class="q-inline-block-display">
                       @if (getEntityTemplate(); as template) {
                         <ng-container

projects/ngx-angular-query-builder/src/lib/query-builder/query-builder.component.html

@@ -4,11 +4,11 @@ import "zone.js";
 import "zone.js/testing";
 import { getTestBed } from "@angular/core/testing";
 import {
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting
-} from "@angular/platform-browser-dynamic/testing";
+  BrowserTestingModule,
+  platformBrowserTesting
+} from "@angular/platform-browser/testing";
 
 // First, initialize the Angular testing environment.
-getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting(), {
+getTestBed().initTestEnvironment(BrowserTestingModule, platformBrowserTesting(), {
   teardown: { destroyAfterEach: true }
 });