Angular v22 support

angular.json

@@ -0,0 +1,31 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "cli": {
+    "packageManager": "yarn",
+    "analytics": false
+  },
+  "newProjectRoot": "projects",
+  "projects": {
+    "uirouter-angular": {
+      "projectType": "library",
+      "root": "./",
+      "sourceRoot": "./src",
+      "prefix": "ui",
+      "architect": {
+        "build": {
+          "builder": "@angular/build:ng-packagr",
+          "configurations": {
+            "production": {
+              "tsConfig": "./tsconfig.json"
+            },
+            "development": {
+              "tsConfig": "./tsconfig.json"
+            }
+          },
+          "defaultConfiguration": "production"
+        }
+      }
+    }
+  }
+}

downstream_projects.json

@@ -2,9 +2,9 @@
   "packageDir": "./dist",
   "projects": {
     "sample-app-angular": "https://github.com/ui-router/sample-app-angular.git",
-    "angular21": "./test-angular-versions/v21",
-    "angular21standalone": "./test-angular-versions/v21-standalone",
-    "angular21zoneless": "./test-angular-versions/v21-zoneless",
-    "typescript58": "./test-typescript-versions/typescript5.9"
+    "angular22": "./test-angular-versions/v22",
+    "angular22standalone": "./test-angular-versions/v22-standalone",
+    "angular22zoneless": "./test-angular-versions/v22-zoneless",
+    "typescript6": "./test-typescript-versions/typescript6"
   }
 }

ng-package.json

@@ -1,6 +1,6 @@
-{ 
+{
   "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
   "lib": {
     "entryFile": "src/index.ts"
   }
-}
+}

package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "clean": "shx rm -rf lib lib-esm _bundles _doc dist",
     "compile": "npm run clean && ngc",
-    "build": "ng-packagr -p ng-package.json",
+    "build": "ng build",
     "release": "release --deps @uirouter/core @uirouter/rx",
     "check-peer-dependencies": "check-peer-dependencies",
     "test": "npm run test:zone && npm run test:zoneless",
@@ -48,37 +48,37 @@
   "license": "MIT",
   "distDir": "dist",
   "peerDependencies": {
-    "@angular/common": "^21.0.0",
-    "@angular/core": "^21.0.0",
+    "@angular/common": "^22.0.0",
+    "@angular/core": "^22.0.0",
     "@uirouter/core": "^6.1.2",
     "@uirouter/rx": "^1.0.0"
   },
   "devDependencies": {
     "@analogjs/vite-plugin-angular": "^2.2.0",
     "@analogjs/vitest-angular": "^2.2.0",
-    "@angular-devkit/architect": "^0.2100.0",
-    "@angular-devkit/build-angular": "^21.0.4",
-    "@angular/common": "^21.0.3",
-    "@angular/compiler": "^21.0.3",
-    "@angular/compiler-cli": "^21.0.3",
-    "@angular/core": "^21.0.3",
-    "@angular/platform-browser": "^21.0.3",
-    "@angular/platform-browser-dynamic": "^21.0.3",
+    "@angular-devkit/architect": "^0.2200.5",
+    "@angular/build": "^22.0.5",
+    "@angular/cli": "^22.0.5",
+    "@angular/common": "^22.0.5",
+    "@angular/compiler": "^22.0.5",
+    "@angular/compiler-cli": "^22.0.5",
+    "@angular/core": "^22.0.5",
+    "@angular/platform-browser": "^22.0.5",
+    "@eslint/js": "^9.28.0",
     "@types/node": "^24.10.1",
     "@uirouter/core": "^6.1.2",
     "@uirouter/publish-scripts": "2.7.0",
     "@uirouter/rx": "^1.0.0",
+    "chokidar": "^5.0.0",
+    "eslint": "^9.28.0",
     "husky": "^9.0.0",
     "jsdom": "^27.4.0",
-    "ng-packagr": "^21.0.0",
+    "ng-packagr": "^22.0.1",
     "prettier": "^3.4.0",
     "pretty-quick": "^4.0.0",
     "rxjs": "~7.8.2",
-    "tslib": "^2.8.1",
-    "@eslint/js": "^9.28.0",
-    "eslint": "^9.28.0",
+    "typescript": "~6.0.3",
     "typescript-eslint": "^8.33.0",
-    "typescript": "~5.9.3",
     "vitest": "^4.0.8",
     "zone.js": "~0.16.0"
   },
@@ -122,5 +122,8 @@
         "repo": "https://github.com/ui-router/rx"
       }
     ]
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
   }
 }

src/directives/uiView.ts

@@ -1,4 +1,5 @@
 import {
+  ChangeDetectionStrategy,
   Component,
   ComponentMirror,
   ComponentRef,
@@ -113,6 +114,7 @@ function ng2ComponentInputs<T>(mirror: ComponentMirror<T>): InputMapping[] {
   selector: 'ui-view, [ui-view]',
   exportAs: 'uiView',
   standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
     <ng-template #componentTarget></ng-template>
     @if (!_componentRef()) {

test-angular-versions/v21-standalone/package.json → test-angular-versions/v22-standalone/package.json

@@ -1,22 +1,22 @@
 {
-  "name": "v21-standalone",
+  "name": "v22-standalone",
   "version": "0.0.0",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
     "build": "ng build",
     "watch": "ng build --watch --configuration development",
-    "test": "npm run test:dev && npm run test:prod",
+    "test": "playwright install chromium && npm run test:dev && npm run test:prod",
     "test:dev": "ng build --configuration development && DIST_PATH=dist/v21-standalone/browser npx playwright test",
     "test:prod": "ng build  --configuration production && DIST_PATH=dist/v21-standalone/browser npx playwright test"
   },
   "private": true,
   "dependencies": {
-    "@angular/common": "^21.0.3",
-    "@angular/compiler": "^21.0.3",
-    "@angular/core": "^21.0.3",
-    "@angular/platform-browser": "^21.0.3",
-    "@angular/platform-browser-dynamic": "^21.0.3",
+    "@angular/common": "^22.0.8",
+    "@angular/compiler": "^22.0.8",
+    "@angular/core": "^22.0.8",
+    "@angular/platform-browser": "^22.0.8",
+    "@angular/platform-browser-dynamic": "^22.0.8",
     "@uirouter/angular": "*",
     "@uirouter/core": "*",
     "@uirouter/rx": "*",
@@ -25,11 +25,18 @@
     "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@angular/build": "^21.0.2",
-    "@angular/cli": "^21.0.2",
-    "@angular/compiler-cli": "^21.0.3",
+    "@angular/build": "^22.0.8",
+    "@angular/cli": "^22.0.8",
+    "@angular/compiler-cli": "^22.0.8",
     "@playwright/test": "^1.49.0",
+    "istanbul-lib-instrument": "^6.0.3",
     "serve": "^14.2.4",
-    "typescript": "~5.9.3"
+    "typescript": "~6.0.3"
+  },
+  "overrides": {
+    "@uirouter/angular": {
+      "@angular/common": "$@angular/common",
+      "@angular/core": "$@angular/core"
+    }
   }
 }

test-angular-versions/v21-zoneless/src/app/about.component.ts → test-angular-versions/v22-standalone/src/app/about.component.ts

@@ -1,8 +1,9 @@
-import { Component } from '@angular/core';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
 
 @Component({
   selector: 'app-about',
   template: ` <p>about works!</p> `,
+  changeDetection: ChangeDetectionStrategy.Eager,
   standalone: true,
 })
 export class AboutComponent {}

test-angular-versions/v22-standalone/src/app/app.component.ts

@@ -0,0 +1,23 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { AnchorUISref, UISref, UISrefActive, UIView } from '@uirouter/angular';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styles: [
+    `
+      .app {
+        text-align: center;
+        border: 1px solid;
+      }
+    `,
+    `
+      .active {
+        font-weight: bold;
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  imports: [UIView, AnchorUISref, UISref, UISrefActive],
+})
+export class AppComponent {}

test-angular-versions/v21-zoneless/src/app/home.component.ts → test-angular-versions/v22-standalone/src/app/home.component.ts

@@ -1,8 +1,9 @@
-import { Component } from '@angular/core';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
 
 @Component({
   selector: 'app-home',
   template: ` <p>home works!</p> `,
+  changeDetection: ChangeDetectionStrategy.Eager,
   standalone: true,
 })
 export class HomeComponent {}

test-angular-versions/v22-standalone/src/app/lazy/lazy.component.ts

@@ -0,0 +1,14 @@
+import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
+
+@Component({
+  selector: 'app-lazy',
+  template: `
+    <p>{{ state.name }} works!</p>
+    <ui-view></ui-view>
+  `,
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
+})
+export class LazyComponent {
+  @Input('$state$') state: any;
+}

test-angular-versions/v21-standalone/src/app/lazy/lazy2.component.ts → test-angular-versions/v22-standalone/src/app/lazy/lazy2.component.ts

@@ -1,11 +1,12 @@
-import { Component, inject, input } from '@angular/core';
+import { Component, inject, input, ChangeDetectionStrategy } from '@angular/core';
 import { Ng2StateDeclaration, UIRouterModule } from '@uirouter/angular';
 import { LAZY_PROVIDER_TOKE } from './lazy.module';
 
 @Component({
   selector: 'app-lazy',
   standalone: true,
   imports: [UIRouterModule],
+  changeDetection: ChangeDetectionStrategy.Eager,
   template: `
     <p>{{ state().name }} works!</p>
     <p id="lazy-child-provided">{{ _providedString }}</p>

test-angular-versions/v21/tsconfig.app.json → test-angular-versions/v22-standalone/tsconfig.app.json

@@ -6,10 +6,14 @@
     "outDir": "./out-tsc/app",
     "types": []
   },
-  "files": [
-    "src/main.ts"
-  ],
-  "include": [
-    "src/**/*.d.ts"
-  ]
+  "files": ["src/main.ts"],
+  "include": ["src/**/*.d.ts"],
+  "angularCompilerOptions": {
+    "extendedDiagnostics": {
+      "checks": {
+        "nullishCoalescingNotNullable": "suppress",
+        "optionalChainNotNullable": "suppress"
+      }
+    }
+  }
 }

test-angular-versions/v21/tsconfig.spec.json → test-angular-versions/v22-standalone/tsconfig.spec.json

@@ -4,12 +4,15 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "./out-tsc/spec",
-    "types": [
-      "jasmine"
-    ]
+    "types": ["jasmine"]
   },
-  "include": [
-    "src/**/*.spec.ts",
-    "src/**/*.d.ts"
-  ]
+  "include": ["src/**/*.spec.ts", "src/**/*.d.ts"],
+  "angularCompilerOptions": {
+    "extendedDiagnostics": {
+      "checks": {
+        "nullishCoalescingNotNullable": "suppress",
+        "optionalChainNotNullable": "suppress"
+      }
+    }
+  }
 }