build: update to angular 22

angular-split · samuelmbabhazi · Aug 18, 2026 · Aug 18, 2026 · Aug 18, 2026 · Aug 18, 2026
commit 77b59eada7b0fd8d57bf66e4b930b21cb575b3a1
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -26,54 +26,54 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^21.2.20",
-    "@angular/common": "^21.2.20",
-    "@angular/compiler": "^21.2.20",
-    "@angular/core": "^21.2.20",
-    "@angular/forms": "^21.2.20",
-    "@angular/platform-browser": "^21.2.20",
-    "@angular/platform-browser-dynamic": "^21.2.20",
-    "@angular/router": "^21.2.20",
+    "@angular/animations": "^22.1.2",
+    "@angular/common": "^22.1.2",
+    "@angular/compiler": "^22.1.2",
+    "@angular/core": "^22.1.2",
+    "@angular/forms": "^22.1.2",
+    "@angular/platform-browser": "^22.1.2",
+    "@angular/platform-browser-dynamic": "^22.1.2",
+    "@angular/router": "^22.1.2",
     "bootstrap": "^5.3.1",
     "marked": "7.0.4",
     "ngx-bootstrap": "^21.2.2",
     "rxjs": "~7.8.0",
     "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@angular-devkit/architect": "^0.2102.21",
-    "@angular-devkit/core": "^21.2.21",
-    "@angular-devkit/schematics": "^21.2.21",
+    "@angular-devkit/architect": "^0.2201.4",
+    "@angular-devkit/core": "^22.1.4",
+    "@angular-devkit/schematics": "^22.1.4",
     "@angular-eslint/builder": "20.1.1",
     "@angular-eslint/eslint-plugin": "20.1.1",
     "@angular-eslint/eslint-plugin-template": "20.1.1",
     "@angular-eslint/schematics": "20.1.1",
     "@angular-eslint/template-parser": "20.1.1",
-    "@angular/build": "^21.2.21",
-    "@angular/cli": "^21.2.21",
-    "@angular/compiler-cli": "^21.2.20",
-    "@angular/language-service": "^21.2.20",
+    "@angular/build": "^22.1.4",
+    "@angular/cli": "^22.1.4",
+    "@angular/compiler-cli": "^22.1.2",
+    "@angular/language-service": "^22.1.2",
     "@commitlint/cli": "^18.5.0",
     "@commitlint/config-angular": "^18.5.0",
     "@commitlint/config-conventional": "^18.5.0",
     "@release-it/bumper": "^6.0.1",
     "@release-it/conventional-changelog": "^9.0.3",
     "@types/marked": "^5.0.1",
-    "@types/node": "20.5.4",
+    "@types/node": "26.2.0",
     "@typescript-eslint/eslint-plugin": "^7.2.0",
     "@typescript-eslint/parser": "^7.2.0",
     "angular-cli-ghpages": "^2.0.0-beta.2",
     "cypress": "^13.10.0",
     "eslint": "^8.57.0",
     "husky": "^8.0.3",
     "lint-staged": "^14.0.1",
-    "ng-packagr": "^21.2.7",
+    "ng-packagr": "^22.1.1",
     "postcss": "8.4.28",
     "prettier": "^3.8.1",
     "serve": "^14.2.1",
     "ts-node": "10.9.1",
     "tslib": "^2.6.2",
-    "typescript": "5.9.3",
+    "typescript": "6.0.3",
     "webpack-bundle-analyzer": "4.9.0",
     "wireit": "^0.14.3"
   },

diff --git a/projects/angular-split/tsconfig.lib.json b/projects/angular-split/tsconfig.lib.json
@@ -17,6 +17,12 @@
     "compilationMode": "partial",
     "skipTemplateCodegen": true,
     "strictMetadataEmit": true,
+    "extendedDiagnostics": {
+      "checks": {
+        "nullishCoalescingNotNullable": "suppress",
+        "optionalChainNotNullable": "suppress"
+      }
+    },
     "fullTemplateTypeCheck": true,
     "strictInjectionParameters": true,
     "enableResourceInlining": true

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -1,4 +1,4 @@
-import { Component, inject } from '@angular/core'
+import { Component, inject, ChangeDetectionStrategy } from '@angular/core'
 import { NavigationEnd, Router, RouterOutlet } from '@angular/router'
 import { filter } from 'rxjs/operators'
 import { TopbarComponent } from './ui/components/topbar.component'
@@ -20,6 +20,7 @@ import { TopbarComponent } from './ui/components/topbar.component'
       }
     `,
   ],
+  changeDetection: ChangeDetectionStrategy.Eager,
   template: `
     <sp-topbar></sp-topbar>
     <div>

diff --git a/src/app/changelog/changelog.component.ts b/src/app/changelog/changelog.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, inject } from '@angular/core'
+import { Component, OnInit, inject, ChangeDetectionStrategy } from '@angular/core'
 import { Observable } from 'rxjs'
 
 import { AsyncPipe } from '@angular/common'
@@ -16,6 +16,7 @@ import { ChangelogService } from './changelog.service'
       }
     `,
   ],
+  changeDetection: ChangeDetectionStrategy.Eager,
   template: `
     <div class="container">
       <div [innerHTML]="changelogHtml$ | async"></div>

diff --git a/src/app/documentation/documentation.component.ts b/src/app/documentation/documentation.component.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core'
+import { Component, ChangeDetectionStrategy } from '@angular/core'
 
 @Component({
   selector: 'sp-doc',
@@ -29,6 +29,7 @@ import { Component } from '@angular/core'
       }
     `,
   ],
+  changeDetection: ChangeDetectionStrategy.Eager,
   templateUrl: './documentation.component.html',
 })
 export class DocumentationComponent {

diff --git a/src/app/examples/custom-gutter-style/custom-gutter.component.ts b/src/app/examples/custom-gutter-style/custom-gutter.component.ts
@@ -1,4 +1,4 @@
-import { Component, computed, inject, input } from '@angular/core'
+import { Component, computed, inject, input, ChangeDetectionStrategy } from '@angular/core'
 import { SplitComponent, SplitGutterComponent, SplitGutterContext, SplitGutterDragHandleDirective } from 'angular-split'
 
 @Component({
@@ -47,6 +47,7 @@ import { SplitComponent, SplitGutterComponent, SplitGutterContext, SplitGutterDr
     }
   `,
   imports: [SplitGutterDragHandleDirective],
+  changeDetection: ChangeDetectionStrategy.Eager,
   host: {
     '[class]': 'splitComponent.direction()',
     '[style.background-color]': 'bgColor()',

diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts
@@ -1,4 +1,4 @@
-import { Component, VERSION } from '@angular/core'
+import { Component, VERSION, ChangeDetectionStrategy } from '@angular/core'
 
 @Component({
   selector: 'sp-home',
@@ -26,6 +26,7 @@ import { Component, VERSION } from '@angular/core'
       }
     `,
   ],
+  changeDetection: ChangeDetectionStrategy.Eager,
   template: `
     <div class="container">
       <div class="jumbotron">

diff --git a/src/app/ui/components/exampleTitle.component.ts b/src/app/ui/components/exampleTitle.component.ts
@@ -1,4 +1,4 @@
-import { Component, inject, Input } from '@angular/core'
+import { Component, inject, Input, ChangeDetectionStrategy } from '@angular/core'
 import { DomSanitizer, SafeHtml, SafeResourceUrl } from '@angular/platform-browser'
 import { ExampleEnum } from '../../examples/example-types'
 import { exampleRoutes } from '../../examples/examples.routes'
@@ -17,6 +17,7 @@ import { exampleRoutes } from '../../examples/examples.routes'
       }
     `,
   ],
+  changeDetection: ChangeDetectionStrategy.Eager,
   template: `
     <h4>
       <div [innerHTML]="label"></div>

diff --git a/src/app/ui/components/topbar.component.ts b/src/app/ui/components/topbar.component.ts
@@ -77,7 +77,7 @@ import { exampleRoutes } from '../../examples/examples.routes'
                 <a
                   class="dropdown-item"
                   [routerLink]="['/examples', ex.path]"
-                  [innerHTML]="transform(ex?.data?.label)"
+                  [innerHTML]="transform($safeNavigationMigration(ex?.data?.label))"
                 ></a>
               </li>
             }

diff --git a/src/main.ts b/src/main.ts
@@ -1,4 +1,4 @@
-import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
+import { provideHttpClient, withInterceptorsFromDi, withXhr } from '@angular/common/http'
 import { importProvidersFrom, provideZoneChangeDetection } from '@angular/core'
 import { FormsModule } from '@angular/forms'
 import { bootstrapApplication, BrowserModule } from '@angular/platform-browser'
@@ -28,6 +28,6 @@ bootstrapApplication(AppComponent, {
     importProvidersFrom(BrowserModule, FormsModule),
     provideAnimations(),
     provideRouter(routes),
-    provideHttpClient(withInterceptorsFromDi()),
+    provideHttpClient(withXhr(), withInterceptorsFromDi()),
   ],
 }).catch((err) => console.error(err))
diff --git a/src/tsconfig.app.json b/src/tsconfig.app.json
@@ -4,5 +4,13 @@
     "outDir": "../out-tsc/app",
     "types": []
   },
-  "exclude": ["test.ts", "**/*.spec.ts"]
+  "exclude": ["test.ts", "**/*.spec.ts"],
+  "angularCompilerOptions": {
+    "extendedDiagnostics": {
+      "checks": {
+        "nullishCoalescingNotNullable": "suppress",
+        "optionalChainNotNullable": "suppress"
+      }
+    }
+  }
 }