feat: support Angular 22

example/index.html

@@ -2,7 +2,7 @@
   <head>
     <script src="//unpkg.com/angular@1.6.4/angular.js"></script>
     <script src="//unpkg.com/reflect-metadata@0.1.13"></script>
-    <script src="//unpkg.com/zone.js@0.14.4"></script>
+    <script src="//unpkg.com/zone.js@0.16.0"></script>
   </head>
   <body>
     <!-- the app will fill this ui-view -->

example/package.json

@@ -14,26 +14,26 @@
     ]
   },
   "dependencies": {
-    "@angular/animations": "^21.0.0",
-    "@angular/common": "^21.0.0",
-    "@angular/compiler": "^21.0.0",
-    "@angular/compiler-cli": "^21.0.0",
-    "@angular/core": "^21.0.0",
-    "@angular/platform-browser": "^21.0.0",
-    "@angular/platform-browser-dynamic": "^21.0.0",
-    "@angular/upgrade": "^21.0.0",
+    "@angular/animations": "^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",
+    "@angular/platform-browser-dynamic": "^22.0.5",
+    "@angular/upgrade": "^22.0.5",
     "@types/angular": "^1.8.9",
     "@types/jquery": "^3.2.16",
-    "@uirouter/angular": "^21.0.0",
+    "@uirouter/angular": "^22.0.0",
     "@uirouter/angular-hybrid": "latest",
     "@uirouter/angularjs": "1.1.1",
-    "@uirouter/core": "^6.1.1",
+    "@uirouter/core": "^6.1.2",
     "@uirouter/rx": "^1.0.0",
     "angular": "1.8.3",
-    "rxjs": "~7.8.0",
+    "rxjs": "~7.8.2",
     "tslib": "^2.8.1",
-    "typescript": "~5.9.2",
-    "zone.js": "~0.15.0"
+    "typescript": "~6.0.3",
+    "zone.js": "~0.16.0"
   },
   "devDependencies": {
     "@uirouter/cypress-runner": "^3.1.0",

example/src/main.ts

@@ -4,14 +4,14 @@ import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { UpgradeModule } from '@angular/upgrade/static';
 import { BrowserModule } from '@angular/platform-browser';
 import { UIRouterUpgradeModule, NgHybridStateDeclaration } from '@uirouter/angular-hybrid';
-import { UrlService } from '@uirouter/core';
+import { StateRegistry, UrlService } from '@uirouter/core';
 
 const app = angular.module('minimal', ['ui.router.upgrade']);
 
 app.run([
   '$stateRegistry',
   '$urlService',
-  ($stateRegistry, $urlService) => {
+  ($stateRegistry: StateRegistry, $urlService: UrlService) => {
     $urlService.rules.initial({ state: 'app' });
 
     $stateRegistry.register({
@@ -56,7 +56,7 @@ app.component('ng1Component', {
       <a ui-sref="app">Back to app</a>
       <ui-view></ui-view>
     `,
-  controller: function () {
+  controller: function (this: { $onInit?: () => void }) {
     this.$onInit = function () {
       console.log('ng1Component.$onInit()');
     };
@@ -106,7 +106,7 @@ export class RootModule {
 
 // Using AngularJS config block, call `deferIntercept()`.
 // This tells UI-Router to delay the initial URL sync (until all bootstrapping is complete)
-app.config(['$urlServiceProvider', ($urlService) => $urlService.deferIntercept()]);
+app.config(['$urlServiceProvider', ($urlService: UrlService) => $urlService.deferIntercept()]);
 
 // Manually bootstrap the Angular app
 platformBrowserDynamic()

example/tsconfig.json

@@ -7,7 +7,7 @@
     "experimentalDecorators": true,
     "module": "es6",
     "moduleResolution": "bundler",
-    "target": "es5",
+    "target": "es6",
     "rootDir": "src",
     "outDir": "transpiled",
     "declaration": false,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uirouter/angular-hybrid",
-  "version": "21.0.0",
+  "version": "22.0.0",
   "scripts": {
     "example": "cd example && npm i && npm start",
     "clean": "shx rm -rf lib _bundles dist",
@@ -18,43 +18,43 @@
     ]
   },
   "peerDependencies": {
-    "@angular/core": "^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0|| ^20.0.0 || ^21.0.0",
-    "@angular/upgrade": "^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0|| ^20.0.0 || ^21.0.0",
-    "@uirouter/angular": "^21.0.0",
+    "@angular/core": "^22.0.0",
+    "@angular/upgrade": "^22.0.0",
+    "@uirouter/angular": "^22.0.0",
     "@uirouter/angularjs": "^1.0.30",
-    "@uirouter/core": "^6.1.1",
+    "@uirouter/core": "^6.1.2",
     "angular": "^1.5.0"
   },
   "resolutions": {
-    "@uirouter/core": "^6.1.0"
+    "@uirouter/core": "^6.1.2"
   },
   "devDependencies": {
-    "@angular/animations": "^21.0.0",
-    "@angular/common": "^21.0.0",
-    "@angular/compiler": "^21.0.0",
-    "@angular/compiler-cli": "^21.0.0",
-    "@angular/core": "^21.0.0",
-    "@angular/platform-browser": "^21.0.0",
-    "@angular/platform-browser-dynamic": "^21.0.0",
-    "@angular/upgrade": "^21.0.0",
+    "@angular/animations": "^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",
+    "@angular/platform-browser-dynamic": "^22.0.5",
+    "@angular/upgrade": "^22.0.5",
     "@types/angular": "^1.8.9",
     "@types/jquery": "^3.5.6",
-    "@uirouter/angular": "^21.0.0",
+    "@uirouter/angular": "^22.0.0",
     "@uirouter/angularjs": "^1.1.0",
-    "@uirouter/core": "^6.1.1",
+    "@uirouter/core": "^6.1.2",
     "@uirouter/publish-scripts": "^2.7.0",
     "@uirouter/rx": "^1.0.0",
     "angular": "^1.8.3",
     "husky": "^9.1.7",
-    "ng-packagr": "^21.0.0",
+    "ng-packagr": "^22.0.1",
     "prettier": "^3.6.2",
     "pretty-quick": "^4.2.2",
-    "rxjs": "~7.8.0",
+    "rxjs": "~7.8.2",
     "rxjs-compat": "^6.5.4",
     "shx": "^0.3.3",
-    "typescript": "~5.9.2",
+    "typescript": "~6.0.3",
     "tslib": "^2.8.1",
-    "zone.js": "~0.15.0"
+    "zone.js": "~0.16.0"
   },
   "distDir": "dist",
   "sideEffects": true,

src/angular-hybrid.ts

@@ -1,8 +1,7 @@
 import { Component, ElementRef, Inject, Injector, Input, ModuleWithProviders, NgModule } from '@angular/core';
-import { downgradeComponent, UpgradeModule, getAngularJSGlobal, getAngularLib } from '@angular/upgrade/static';
+import { downgradeComponent, UpgradeModule, getAngularJSGlobal } from '@angular/upgrade/static';
 
 import {
-  StateObject,
   forEach,
   PathNode,
   Resolvable,
@@ -33,8 +32,7 @@ import { $InjectorLike, Ng1ViewConfig } from '@uirouter/angularjs';
 import { UIRouterRx } from '@uirouter/rx';
 import { NgHybridStatesModule } from './interfaces';
 
-const getAngularJS = getAngularJSGlobal || getAngularLib;
-const angular = getAngularJS();
+const angular = getAngularJSGlobal();
 
 if (!angular) {
   throw new Error(
@@ -131,7 +129,7 @@ export function objectFactory() {
 export class UIViewNgUpgrade {
   // The ui-view's name (or '$default')
   @Input()
-  name: string;
+  name!: string;
 
   constructor(
     ref: ElementRef,
@@ -182,7 +180,8 @@ export function getUIRouter($injector: any) {
 }
 
 export function getParentUIViewInject(r: StateRegistry): ParentUIViewInject {
-  return { fqn: null, context: r.root() };
+  // The root ui-view has no fully qualified name, so its runtime value is null.
+  return { fqn: null, context: r.root() } as unknown as ParentUIViewInject;
 }
 
 /**
@@ -262,7 +261,7 @@ upgradeModule.run([
 upgradeModule.config([
   '$stateRegistryProvider',
   ($stateRegistry: StateRegistry) => {
-    $stateRegistry.decorator('lazyLoad', ng2LazyLoadBuilder);
+    $stateRegistry.decorator('lazyLoad', (state, parentFn) => ng2LazyLoadBuilder(state, parentFn!));
   },
 ]);
 
@@ -278,7 +277,8 @@ upgradeModule.config([
 upgradeModule.config([
   '$stateRegistryProvider',
   ($stateRegistry: StateRegistry) => {
-    $stateRegistry.decorator('views', function (state: StateObject, parentFn: Function) {
+    $stateRegistry.decorator('views', function (state, parentFn) {
+      if (!parentFn) throw new Error('The views decorator requires a parent builder');
       const views = parentFn(state);
 
       forEach(views, (viewDecl: any, viewName: string) => {

src/interfaces.ts

@@ -1,7 +1,7 @@
 import { Ng2StateDeclaration, StatesModule } from '@uirouter/angular';
 import { Ng1StateDeclaration, Ng1StateTransitionHook } from '@uirouter/angularjs';
 import { StateProvider } from '@uirouter/angularjs/lib/stateProvider';
-import { IInjectable } from '@uirouter/core';
+import { IInjectable, StateObject } from '@uirouter/core';
 
 export interface _NgHybridStateDeclaration extends Ng2StateDeclaration {
   onExit?: any;
@@ -25,8 +25,8 @@ export interface NgHybridStatesModule extends _NgHybridStateModule {
 
 declare module '@uirouter/core/lib/state/stateRegistry' {
   interface StateRegistry {
-    register(state: Ng1StateDeclaration);
-    register(state: Ng2StateDeclaration);
+    register(state: Ng1StateDeclaration): StateObject;
+    register(state: Ng2StateDeclaration): StateObject;
   }
 }