Update to Angular 21

BREAKING_CHANGES.md

@@ -4,6 +4,14 @@ This file describes the steps to take when a breaking change is introduced in th
 
 Breaking changes are grouped by their major version number.
 
+## v21.0.0
+
+### Removal of deprecations
+
+The following have been removed:
+
+-   `ppw-search-filter` output events `search` and `reset` have been removed. Use `performSearch` and `clear` as events instead.
+
 ## v20.0.0
 
 > :warning: **20.6.0** :warning:

package.json

@@ -20,16 +20,16 @@
     },
     "private": true,
     "dependencies": {
-        "@angular/animations": "20.3.15",
-        "@angular/cdk": "20.2.14",
-        "@angular/common": "20.3.15",
-        "@angular/compiler": "20.3.15",
-        "@angular/core": "20.3.15",
-        "@angular/forms": "20.3.15",
-        "@angular/material": "20.2.14",
-        "@angular/platform-browser": "20.3.15",
-        "@angular/platform-browser-dynamic": "20.3.15",
-        "@angular/router": "20.3.15",
+        "@angular/animations": "21.0.2",
+        "@angular/cdk": "21.0.1",
+        "@angular/common": "21.0.2",
+        "@angular/compiler": "21.0.2",
+        "@angular/core": "21.0.2",
+        "@angular/forms": "21.0.2",
+        "@angular/material": "21.0.1",
+        "@angular/platform-browser": "21.0.2",
+        "@angular/platform-browser-dynamic": "21.0.2",
+        "@angular/router": "21.0.2",
         "@fortawesome/fontawesome-free": "7.1.0",
         "@ngx-translate/core": "17.0.0",
         "@ngx-translate/http-loader": "17.0.0",
@@ -42,15 +42,14 @@
         "zone.js": "0.15.0"
     },
     "devDependencies": {
-        "@angular-devkit/build-angular": "20.3.12",
-        "@angular-eslint/builder": "20.7.0",
-        "@angular-eslint/eslint-plugin": "20.7.0",
-        "@angular-eslint/eslint-plugin-template": "20.7.0",
-        "@angular-eslint/schematics": "20.7.0",
-        "@angular-eslint/template-parser": "20.7.0",
-        "@angular/build": "20.3.12",
-        "@angular/cli": "20.3.12",
-        "@angular/compiler-cli": "20.3.15",
+        "@angular-eslint/builder": "21.0.1",
+        "@angular-eslint/eslint-plugin": "21.0.1",
+        "@angular-eslint/eslint-plugin-template": "21.0.1",
+        "@angular-eslint/schematics": "21.0.1",
+        "@angular-eslint/template-parser": "21.0.1",
+        "@angular/build": "21.0.1",
+        "@angular/cli": "21.0.1",
+        "@angular/compiler-cli": "21.0.2",
         "@types/file-saver-es": "2.0.1",
         "@types/jasmine": "4.3.5",
         "@types/node": "22.13.14",
@@ -68,11 +67,11 @@
         "karma-jasmine": "5.1.0",
         "karma-jasmine-html-reporter": "2.1.0",
         "karma-junit-reporter": "2.0.1",
-        "ng-packagr": "20.2.0",
+        "ng-packagr": "21.0.0",
         "prettier": "3.1.1",
         "prettier-config-standard": "7.0.0",
         "retire": "5.2.5",
-        "typescript": "5.8.3"
+        "typescript": "5.9.3"
     },
     "overrides": {
         "deep-equal": {

projects/ppwcode/ng-async/package.json

@@ -5,8 +5,8 @@
         "url": "https://github.com/peopleware/angular-sdk"
     },
     "peerDependencies": {
-        "@angular/common": "^20.3.15",
-        "@angular/core": "^20.3.15",
+        "@angular/common": "^21.0.2",
+        "@angular/core": "^21.0.2",
         "@ngx-translate/core": "^17.0.0",
         "file-saver-es": "^2.0.5",
         "@ppwcode/js-ts-oddsandends": "^1.4.2",

projects/ppwcode/ng-async/src/lib/async-result/async-result.component.html

@@ -13,10 +13,7 @@
                     }
                 } @else {
                     <ng-container
-                        *ngTemplateOutlet="
-                            successTemplate() ?? null;
-                            context: { $implicit: result, entity: result.entity }
-                        "
+                        *ngTemplateOutlet="successTemplate(); context: { $implicit: result, entity: result.entity }"
                     ></ng-container>
                 }
             }

projects/ppwcode/ng-common-components/package.json

@@ -5,8 +5,8 @@
         "url": "https://github.com/peopleware/angular-sdk"
     },
     "peerDependencies": {
-        "@angular/common": "^20.3.15",
-        "@angular/core": "^20.3.15",
+        "@angular/common": "^21.0.2",
+        "@angular/core": "^21.0.2",
         "@ppwcode/ng-common": "^20.6.1"
     },
     "dependencies": {

projects/ppwcode/ng-common-components/src/lib/search-filter/search-filter.component.ts

@@ -1,6 +1,5 @@
 import { Component, input, InputSignal, output, OutputEmitterRef } from '@angular/core'
 import { MatButtonModule } from '@angular/material/button'
-
 import { MatCardModule } from '@angular/material/card'
 
 @Component({
@@ -20,24 +19,12 @@ export class SearchFilterComponent {
     // Outputs
     public performSearch: OutputEmitterRef<void> = output<void>()
     public clear: OutputEmitterRef<void> = output<void>()
-    /**
-     * @deprecated This output will be removed in v21. It should be replaced with the `performSearch` output.
-     */
-    // eslint-disable-next-line @angular-eslint/no-output-native
-    public search: OutputEmitterRef<void> = output<void>()
-    /**
-     * @deprecated This output will be removed in v21. It should be replaced with the `clear` output.
-     */
-    // eslint-disable-next-line @angular-eslint/no-output-native
-    public reset: OutputEmitterRef<void> = output<void>()
 
     protected executeSearch(): void {
         this.performSearch.emit()
-        this.search.emit()
     }
 
     protected executeClear(): void {
         this.clear.emit()
-        this.reset.emit()
     }
 }

projects/ppwcode/ng-common/package.json

@@ -5,8 +5,8 @@
         "url": "https://github.com/peopleware/angular-sdk"
     },
     "peerDependencies": {
-        "@angular/common": "^20.3.15",
-        "@angular/core": "^20.3.15"
+        "@angular/common": "^21.0.2",
+        "@angular/core": "^21.0.2"
     },
     "dependencies": {
         "tslib": "^2.3.0"

projects/ppwcode/ng-dialogs/package.json

@@ -5,8 +5,8 @@
         "url": "https://github.com/peopleware/angular-sdk"
     },
     "peerDependencies": {
-        "@angular/common": "^20.3.15",
-        "@angular/core": "^20.3.15"
+        "@angular/common": "^21.0.2",
+        "@angular/core": "^21.0.2"
     },
     "dependencies": {
         "tslib": "^2.3.0"

projects/ppwcode/ng-forms/package.json

@@ -5,8 +5,8 @@
         "url": "https://github.com/peopleware/angular-sdk"
     },
     "peerDependencies": {
-        "@angular/common": "^20.3.15",
-        "@angular/core": "^20.3.15",
+        "@angular/common": "^21.0.2",
+        "@angular/core": "^21.0.2",
         "@ppwcode/ng-common": "^20.6.1"
     },
     "dependencies": {

projects/ppwcode/ng-router/package.json

@@ -5,8 +5,8 @@
         "url": "https://github.com/peopleware/angular-sdk"
     },
     "peerDependencies": {
-        "@angular/common": "^20.3.15",
-        "@angular/core": "^20.3.15",
+        "@angular/common": "^21.0.2",
+        "@angular/core": "^21.0.2",
         "@ppwcode/ng-common": "^20.6.1"
     },
     "dependencies": {

projects/ppwcode/ng-state-management/package.json

@@ -5,8 +5,8 @@
         "url": "https://github.com/peopleware/angular-sdk"
     },
     "peerDependencies": {
-        "@angular/common": "^20.3.15",
-        "@angular/core": "^20.3.15"
+        "@angular/common": "^21.0.2",
+        "@angular/core": "^21.0.2"
     },
     "dependencies": {
         "tslib": "^2.3.0"

projects/ppwcode/ng-unit-testing/package.json

@@ -5,8 +5,8 @@
         "url": "https://github.com/peopleware/angular-sdk"
     },
     "peerDependencies": {
-        "@angular/common": "^20.3.15",
-        "@angular/core": "^20.3.15",
+        "@angular/common": "^21.0.2",
+        "@angular/core": "^21.0.2",
         "jasmine-core": "^3.9.0 || ^4.0.0 || ^5.0.0"
     },
     "dependencies": {

projects/ppwcode/ng-wireframe/package.json

@@ -5,8 +5,8 @@
         "url": "https://github.com/peopleware/angular-sdk"
     },
     "peerDependencies": {
-        "@angular/common": "^20.3.15",
-        "@angular/core": "^20.3.15",
+        "@angular/common": "^21.0.2",
+        "@angular/core": "^21.0.2",
         "@ppwcode/ng-async": "^20.6.1"
     },
     "dependencies": {

src/app/app.component.ts

@@ -1,4 +1,4 @@
-import { AsyncPipe, NgOptimizedImage } from '@angular/common'
+import { NgOptimizedImage } from '@angular/common'
 import { Component, computed, inject, signal, Signal } from '@angular/core'
 import { FormsModule } from '@angular/forms'
 import { MatCard, MatCardContent } from '@angular/material/card'
@@ -25,7 +25,6 @@ import LanguageSelectComponent from './language-select/language-select.component
         FormsModule,
         WireframeComponent,
         NgOptimizedImage,
-        AsyncPipe,
         RouterLink
     ]
 })

src/main.ts

@@ -2,7 +2,7 @@ import { registerLocaleData } from '@angular/common'
 import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
 import localeEn from '@angular/common/locales/en-BE'
 import localeNl from '@angular/common/locales/nl-BE'
-import { LOCALE_ID } from '@angular/core'
+import { LOCALE_ID, provideZoneChangeDetection } from '@angular/core'
 import { MAT_DATE_FORMATS, MAT_NATIVE_DATE_FORMATS, MatDateFormats } from '@angular/material/core'
 import { bootstrapApplication } from '@angular/platform-browser'
 import { provideRouter, TitleStrategy, withViewTransitions } from '@angular/router'
@@ -41,6 +41,7 @@ const translationLocationPrefix =
 
 bootstrapApplication(AppComponent, {
     providers: [
+        provideZoneChangeDetection(),
         { provide: LOCALE_ID, useValue: 'en-US' },
         { provide: TitleStrategy, useClass: TranslatedPageTitleStrategy },
         { provide: MAT_DATE_FORMATS, useValue: DATE_FORMATS },

tsconfig.angular.json

@@ -25,7 +25,7 @@
         "sourceMap": true,
         "declaration": false,
         "experimentalDecorators": true,
-        "moduleResolution": "node",
+        "moduleResolution": "bundler",
         "importHelpers": true,
         "target": "ES2022",
         "module": "ES2022",