Support for Angular v21 and a bug fix!

downstream_projects.json

@@ -2,8 +2,9 @@
   "packageDir": "./dist",
   "projects": {
     "sample-app-angular": "https://github.com/ui-router/sample-app-angular.git",
-    "angular20": "./test-angular-versions/v20",
-    "angular20standalone": "./test-angular-versions/v20-standalone",
-    "typescript58": "./test-typescript-versions/typescript5.8"
+    "angular21": "./test-angular-versions/v21",
+    "angular21standalone": "./test-angular-versions/v21-standalone",
+    "angular21zoneless": "./test-angular-versions/v21-zoneless",
+    "typescript58": "./test-typescript-versions/typescript5.9"
   }
 }

package.json

@@ -8,10 +8,13 @@
     "build": "ng-packagr -p ng-package.json",
     "release": "release --deps @uirouter/core @uirouter/rx",
     "check-peer-dependencies": "check-peer-dependencies",
-    "test": "jest --rootDir test",
-    "test:watch": "jest --rootDir test --watchAll",
+    "test": "npm run test:zone && npm run test:zoneless",
+    "test:zone": "jest --rootDir test",
+    "test:zone:watch": "jest --rootDir test --watchAll",
     "test:debug": "node --inspect-brk node_modules/.bin/jest --rootDir test --runInBand",
     "test:downstream": "test_downstream_projects",
+    "test:zoneless": "jest --rootDir test-zoneless",
+    "test:zoneless:watch": "jest --rootDir test-zoneless --watchAll",
     "docs": "generate_docs",
     "docs:publish": "generate_docs && publish_docs",
     "prepublishOnly": "echo && echo DO NOT RUN npm publish.  Instead, run npm run release && echo && echo && false",
@@ -43,43 +46,42 @@
   "license": "MIT",
   "distDir": "dist",
   "peerDependencies": {
-    "@angular/common": "^20.0.0",
-    "@angular/core": "^20.0.0",
-    "@uirouter/core": "^6.1.1",
+    "@angular/common": "^21.0.0",
+    "@angular/core": "^21.0.0",
+    "@uirouter/core": "^6.1.2",
     "@uirouter/rx": "^1.0.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^20.1.5",
-    "@angular/common": "^20.1.6",
-    "@angular/compiler": "^20.1.6",
-    "@angular/compiler-cli": "^20.1.6",
-    "@angular/core": "^20.1.6",
-    "@angular/platform-browser": "^20.1.6",
-    "@angular/platform-browser-dynamic": "^20.1.6",
+    "@angular-devkit/build-angular": "^21.0.2",
+    "@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",
     "@types/jest": "^30.0.0",
-    "@types/node": "^24.1.0",
+    "@types/node": "^24.10.1",
     "@uirouter/core": "^6.1.2",
     "@uirouter/publish-scripts": "2.6.4",
     "@uirouter/rx": "^1.0.0",
     "husky": "^7.0.4",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
-    "jest-preset-angular": "^14.6.1",
-    "jsdom": "^26.1.0",
-    "ng-packagr": "^20.1.0",
+    "jest": "^30.2.0",
+    "jest-environment-jsdom": "^30.2.0",
+    "jest-preset-angular": "^16.0.0",
+    "jsdom": "^27.2.0",
+    "ng-packagr": "^21.0.0",
     "picomatch": "4.0.3",
     "postcss": "^8.5.6",
     "prettier": "^2.8.8",
     "pretty-quick": "^3.3.1",
     "rxjs": "~7.8.2",
-    "rxjs-compat": "^6.5.4",
-    "schema-utils": "^4.3.2",
+    "schema-utils": "^4.3.3",
     "ts-node": "10.9.2",
     "tslib": "^2.8.1",
     "tslint": "^6.1.0",
-    "typescript": "~5.8.3",
-    "vite": "7.1.5",
-    "zone.js": "~0.15.1"
+    "typescript": "~5.9.3",
+    "vite": "7.2.6",
+    "zone.js": "~0.16.0"
   },
   "jest": {
     "preset": "jest-preset-angular",

src/directives/uiView.ts

@@ -8,6 +8,7 @@ import {
   OnDestroy,
   OnInit,
   reflectComponentType,
+  signal,
   Type,
   ViewChild,
   ViewContainerRef,
@@ -34,7 +35,6 @@ import {
 } from '@uirouter/core';
 import { Ng2ViewConfig } from '../statebuilders/views';
 import { MergeInjector } from '../mergeInjector';
-import { CommonModule } from '@angular/common';
 
 /** @hidden */
 let id = 0;
@@ -113,10 +113,11 @@ function ng2ComponentInputs<T>(mirror: ComponentMirror<T>): InputMapping[] {
   selector: 'ui-view, [ui-view]',
   exportAs: 'uiView',
   standalone: true,
-  imports: [CommonModule],
   template: `
     <ng-template #componentTarget></ng-template>
-    <ng-content *ngIf="!_componentRef"></ng-content>
+    @if (!_componentRef()) {
+      <ng-content></ng-content>
+    }
   `,
 })
 export class UIView implements OnInit, OnDestroy {
@@ -132,7 +133,7 @@ export class UIView implements OnInit, OnDestroy {
   }
 
   /** The reference to the component currently inside the viewport */
-  _componentRef: ComponentRef<any>;
+  readonly _componentRef = signal<ComponentRef<any> | null>(null);
   /** Deregisters the ui-view from the view service */
   private _deregisterUIView: Function;
   /** Deregisters the master uiCanExit transition hook */
@@ -193,7 +194,7 @@ export class UIView implements OnInit, OnDestroy {
    * If both are true, adds the uiCanExit component function as a hook to that singular Transition.
    */
   private _invokeUiCanExitHook(trans: Transition) {
-    const instance = this._componentRef && this._componentRef.instance;
+    const instance = this._componentRef() && this._componentRef().instance;
     const uiCanExitFn: TransitionHookFn = instance && instance.uiCanExit;
 
     if (isFunction(uiCanExitFn)) {
@@ -211,7 +212,7 @@ export class UIView implements OnInit, OnDestroy {
    * For each transition, checks if any param values changed and notify component
    */
   private _invokeUiOnParamsChangedHook($transition$: Transition) {
-    const instance = this._componentRef && this._componentRef.instance;
+    const instance = this._componentRef() && this._componentRef().instance;
     const uiOnParamsChanged: TransitionHookFn = instance && instance.uiOnParamsChanged;
 
     if (isFunction(uiOnParamsChanged)) {
@@ -247,8 +248,8 @@ export class UIView implements OnInit, OnDestroy {
   }
 
   private _disposeLast() {
-    if (this._componentRef) this._componentRef.destroy();
-    this._componentRef = null;
+    if (this._componentRef()) this._componentRef().destroy();
+    this._componentRef.set(null);
   }
 
   ngOnDestroy() {
@@ -281,7 +282,7 @@ export class UIView implements OnInit, OnDestroy {
     this._applyUpdatedConfig(config);
 
     // Initiate change detection for the newly created component
-    this._componentRef.changeDetectorRef.markForCheck();
+    this._componentRef().changeDetectorRef.markForCheck();
   }
 
   private _applyUpdatedConfig(config: Ng2ViewConfig) {
@@ -294,9 +295,9 @@ export class UIView implements OnInit, OnDestroy {
     const componentClass = config.viewDecl.component;
 
     // Create the component
-    this._componentRef = this._componentTarget.createComponent(componentClass, { injector: componentInjector });
+    this._componentRef.set(this._componentTarget.createComponent(componentClass, { injector: componentInjector }));
     // Wire resolves to @Input()s
-    this._applyInputBindings(componentClass, this._componentRef, context);
+    this._applyInputBindings(componentClass, this._componentRef(), context);
   }
 
   /**

test-angular-versions/v20-standalone/README.md → test-angular-versions/v21-standalone/README.md

@@ -1,4 +1,4 @@
-# V20-standalone
+# V21-standalone
 
 This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 20.0.5.
 

test-angular-versions/v20-standalone/angular.json → test-angular-versions/v21-standalone/angular.json

@@ -6,7 +6,7 @@
   },
   "newProjectRoot": "projects",
   "projects": {
-    "v20-standalone": {
+    "v21-standalone": {
       "projectType": "application",
       "schematics": {
         "@schematics/angular:class": {
@@ -41,7 +41,7 @@
         "build": {
           "builder": "@angular/build:application",
           "options": {
-            "outputPath": "dist/v20-standalone",
+            "outputPath": "dist/v21-standalone",
             "index": "src/index.html",
             "browser": "src/main.ts",
             "polyfills": [
@@ -87,10 +87,10 @@
           "builder": "@angular/build:dev-server",
           "configurations": {
             "production": {
-              "buildTarget": "v20-standalone:build:production"
+              "buildTarget": "v21-standalone:build:production"
             },
             "development": {
-              "buildTarget": "v20-standalone:build:development"
+              "buildTarget": "v21-standalone:build:development"
             }
           },
           "defaultConfiguration": "development"

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

@@ -1,45 +1,42 @@
 {
-  "name": "v20",
+  "name": "v21-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:dev": "ng build --configuration development && cypress-runner run --path dist/v20/browser",
-    "test:prod": "ng build  --configuration production && cypress-runner run --path dist/v20/browser"
+    "test:dev": "ng build --configuration development && cypress-runner run --path dist/v21-standalone/browser",
+    "test:prod": "ng build  --configuration production && cypress-runner run --path dist/v21-standalone/browser"
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^20.1.6",
-    "@angular/common": "^20.1.6",
-    "@angular/compiler": "^20.1.6",
-    "@angular/core": "^20.1.6",
-    "@angular/forms": "^20.1.6",
-    "@angular/platform-browser": "^20.1.6",
-    "@angular/platform-browser-dynamic": "^20.1.6",
-    "@angular/router": "^20.1.6",
-    "rxjs": "~7.8.0",
-    "tslib": "^2.3.0",
-    "zone.js": "~0.15.0",
+    "@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",
     "@uirouter/angular": "*",
     "@uirouter/cypress-runner": "*",
     "@uirouter/core": "*",
-    "@uirouter/rx": "*"
+    "@uirouter/rx": "*",
+    "rxjs": "~7.8.0",
+    "tslib": "^2.3.0",
+    "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@angular/build": "^20.1.5",
-    "@angular/cli": "^20.1.5",
-    "@angular/compiler-cli": "^20.1.6",
+    "@angular/build": "^21.0.2",
+    "@angular/cli": "^21.0.2",
+    "@angular/compiler-cli": "^21.0.3",
     "@types/jasmine": "~5.1.0",
     "jasmine-core": "~5.1.0",
     "karma": "~6.4.0",
     "karma-chrome-launcher": "~3.2.0",
     "karma-coverage": "~2.2.0",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
-    "typescript": "~5.8.3"
+    "typescript": "~5.9.3"
   },
   "checkPeerDependencies": {
     "ignore": [

test-angular-versions/v20-standalone/src/index.html → test-angular-versions/v21-standalone/src/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <title>v20-standalone</title>
+  <title>v21-standalone</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">

test-angular-versions/v20-standalone/tsconfig.json → test-angular-versions/v21-standalone/tsconfig.json

@@ -14,14 +14,14 @@
     "sourceMap": true,
     "declaration": false,
     "experimentalDecorators": true,
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "importHelpers": true,
     "target": "ES2022",
     "module": "ES2022",
     "useDefineForClassFields": false,
     "lib": [
       "ES2022",
-      "dom"
+      "DOM"
     ]
   },
   "angularCompilerOptions": {

test-angular-versions/v21-zoneless/README.md

@@ -0,0 +1,27 @@
+# v21-zoneless
+
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 20.0.5.
+
+## Development server
+
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
+
+## Code scaffolding
+
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+
+## Build
+
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Running unit tests
+
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Running end-to-end tests
+
+Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.