Angular v22 support

[lindolo25]

Hi @wawyed and @christopherthielen!

Here is the implementation to support Angular v22, it also includes adding Angular cli for easier updates in the future. Tests had few changes as well, configuration and test cases due to changes to Angular API. If you have any questions about the changes please let me know. As always thanks for your time and help!

[christopherthielen]

@lindolo25 should we be using an explicit ChangeDetectionStrategy in UIView? The default changed from Eager to OnPush in NG22, from what I'm reading. I also noted that a previous commit last year turned off the OnPush strategy during the NG21 release?

[Copilot]

Pull request overview

Adds Angular v22 (and TypeScript 6) compatibility across the library’s build/test setup, including new Angular CLI-based test fixtures for v22 (zone, zoneless, and standalone) and updates to existing unit-test scaffolding to match Angular API changes.

Changes:

• Update root build/tooling configuration for Angular v22 (Angular CLI + ng-packagr builder, TS config updates).
• Update Vitest Angular test setup and unit tests for Angular v22 change-detection/testing environment changes.
• Add new v22 Angular CLI fixture apps (zone/zoneless/standalone) + Playwright E2E coverage; add TypeScript 6 compatibility fixture and remove the TS 5.9 one.

Reviewed changes

Copilot reviewed 30 out of 81 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
tsconfig.spec.json	Adds Angular compiler extendedDiagnostics suppressions for specs.
tsconfig.json	Updates TS/Angular compiler options for v22 (bundler resolution, partial compilation, diagnostics suppressions, etc.).
test/uiSrefActive/uiSrefActive.spec.ts	Updates test component change detection settings for v22 behavior.
test/uiSref/uiSref.spec.ts	Updates test component change detection settings for v22 behavior.
test/setup.ts	Updates Angular test environment initialization for zone tests.
test-zoneless/setup.ts	Updates Angular test environment initialization for zoneless tests.
test-typescript-versions/typescript6/yarn.lock	Updates lockfile for Angular v22 + TypeScript 6 fixture.
test-typescript-versions/typescript6/tsconfig.json	Adds TS config for TypeScript 6 fixture project.
test-typescript-versions/typescript6/package.json	Adds package manifest for TypeScript 6 fixture project.
test-typescript-versions/typescript6/index.ts	Adds a minimal compilation smoke test for the TS 6 fixture.
test-typescript-versions/typescript5.9/package.json	Removes the TypeScript 5.9 fixture project.
test-angular-versions/v22/tsconfig.spec.json	Adds v22 fixture spec TS config (CLI-style).
test-angular-versions/v22/tsconfig.json	Adds v22 fixture base TS config (CLI-style).
test-angular-versions/v22/tsconfig.app.json	Adds v22 fixture app TS config (CLI-style).
test-angular-versions/v22/src/styles.css	Adds placeholder global styles for the v22 fixture.
test-angular-versions/v22/src/main.ts	Adds v22 fixture bootstrap entrypoint.
test-angular-versions/v22/src/index.html	Adds v22 fixture HTML shell.
test-angular-versions/v22/src/app/lazy/lazy.module.ts	Adds v22 fixture lazy module/state definitions.
test-angular-versions/v22/src/app/lazy/lazy.component.ts	Adds v22 fixture lazy component.
test-angular-versions/v22/src/app/home.component.ts	Adds v22 fixture home component.
test-angular-versions/v22/src/app/app.module.ts	Adds v22 fixture root module + router configuration.
test-angular-versions/v22/src/app/app.component.ts	Adds v22 fixture root component.
test-angular-versions/v22/src/app/app.component.html	Adds v22 fixture template exercising ui-router directives/views.
test-angular-versions/v22/src/app/about.component.ts	Adds v22 fixture about component.
test-angular-versions/v22/README.md	Adds v22 fixture README (generated-template content).
test-angular-versions/v22/public/favicon.ico	Adds v22 fixture static asset.
test-angular-versions/v22/playwright.config.ts	Adds Playwright config for v22 fixture E2E runs.
test-angular-versions/v22/package.json	Adds v22 fixture package/scripts (build + Playwright E2E).
test-angular-versions/v22/e2e/sample_app.spec.ts	Adds Playwright E2E coverage for v22 fixture routing/UI behavior.
test-angular-versions/v22/angular.json	Adds Angular CLI workspace config for the v22 fixture.
test-angular-versions/v22-zoneless/tsconfig.spec.json	Adds v22-zoneless fixture spec TS config (CLI-style).
test-angular-versions/v22-zoneless/tsconfig.json	Adds v22-zoneless fixture base TS config (CLI-style).
test-angular-versions/v22-zoneless/tsconfig.app.json	Updates v22-zoneless fixture app TS config (diagnostics suppressions).
test-angular-versions/v22-zoneless/src/styles.css	Adds placeholder global styles for the v22-zoneless fixture.
test-angular-versions/v22-zoneless/src/main.ts	Adds v22-zoneless fixture bootstrap entrypoint.
test-angular-versions/v22-zoneless/src/index.html	Adds v22-zoneless fixture HTML shell.
test-angular-versions/v22-zoneless/src/app/lazy/lazy2.component.ts	Updates lazy child component for v22-zoneless fixture.
test-angular-versions/v22-zoneless/src/app/lazy/lazy.module.ts	Adds lazy module + injection token/provider for v22-zoneless fixture.
test-angular-versions/v22-zoneless/src/app/lazy/lazy.component.ts	Adds lazy component for v22-zoneless fixture.
test-angular-versions/v22-zoneless/src/app/home.component.ts	Updates home component change detection for v22-zoneless fixture.
test-angular-versions/v22-zoneless/src/app/app.routes.ts	Adds route/state definitions for v22-zoneless fixture.
test-angular-versions/v22-zoneless/src/app/app.config.ts	Adds ApplicationConfig providers (zoneless CD + router) for v22-zoneless fixture.
test-angular-versions/v22-zoneless/src/app/app.component.ts	Adds v22-zoneless root component exercising ui-router directives/views.
test-angular-versions/v22-zoneless/src/app/app.component.html	Adds v22-zoneless fixture template.
test-angular-versions/v22-zoneless/src/app/about.component.ts	Updates about component change detection for v22-zoneless fixture.
test-angular-versions/v22-zoneless/README.md	Adds v22-zoneless fixture README (generated-template content).
test-angular-versions/v22-zoneless/public/favicon.ico	Adds v22-zoneless fixture static asset.
test-angular-versions/v22-zoneless/playwright.config.ts	Adds Playwright config for v22-zoneless fixture E2E runs.
test-angular-versions/v22-zoneless/package.json	Adds v22-zoneless fixture package/scripts (build + Playwright E2E).
test-angular-versions/v22-zoneless/e2e/sample_app.spec.ts	Adds Playwright E2E coverage for v22-zoneless fixture behavior.
test-angular-versions/v22-zoneless/angular.json	Adds Angular CLI workspace config for the v22-zoneless fixture.
test-angular-versions/v22-standalone/tsconfig.spec.json	Updates v22-standalone fixture spec TS config (diagnostics suppressions).
test-angular-versions/v22-standalone/tsconfig.json	Adds v22-standalone fixture base TS config (CLI-style).
test-angular-versions/v22-standalone/tsconfig.app.json	Updates v22-standalone fixture app TS config (diagnostics suppressions).
test-angular-versions/v22-standalone/src/styles.css	Adds placeholder global styles for the v22-standalone fixture.
test-angular-versions/v22-standalone/src/main.ts	Adds v22-standalone fixture bootstrap entrypoint.
test-angular-versions/v22-standalone/src/index.html	Adds v22-standalone fixture HTML shell.
test-angular-versions/v22-standalone/src/app/lazy/lazy2.component.ts	Updates lazy child component for v22-standalone fixture.
test-angular-versions/v22-standalone/src/app/lazy/lazy.module.ts	Adds lazy module + injection token/provider for v22-standalone fixture.
test-angular-versions/v22-standalone/src/app/lazy/lazy.component.ts	Adds lazy component for v22-standalone fixture.
test-angular-versions/v22-standalone/src/app/home.component.ts	Updates home component change detection for v22-standalone fixture.
test-angular-versions/v22-standalone/src/app/app.routes.ts	Adds route/state definitions for v22-standalone fixture.
test-angular-versions/v22-standalone/src/app/app.config.ts	Adds ApplicationConfig providers (zone CD + router) for v22-standalone fixture.
test-angular-versions/v22-standalone/src/app/app.component.ts	Adds v22-standalone root component exercising ui-router directives/views.
test-angular-versions/v22-standalone/src/app/app.component.html	Adds v22-standalone fixture template.
test-angular-versions/v22-standalone/src/app/about.component.ts	Updates about component change detection for v22-standalone fixture.
test-angular-versions/v22-standalone/README.md	Adds v22-standalone fixture README (generated-template content).
test-angular-versions/v22-standalone/public/favicon.ico	Adds v22-standalone fixture static asset.
test-angular-versions/v22-standalone/playwright.config.ts	Adds Playwright config for v22-standalone fixture E2E runs.
test-angular-versions/v22-standalone/package.json	Adds v22-standalone fixture package/scripts (build + Playwright E2E).
test-angular-versions/v22-standalone/e2e/sample_app.spec.ts	Adds Playwright E2E coverage for v22-standalone fixture behavior.
test-angular-versions/v22-standalone/angular.json	Adds Angular CLI workspace config for the v22-standalone fixture.
test-angular-versions/v21/src/app/lazy/lazy.component.ts	Removes v21 lazy component from the older fixture.
test-angular-versions/v21-zoneless/src/app/lazy/lazy.component.ts	Removes v21-zoneless lazy component from the older fixture.
test-angular-versions/v21-zoneless/src/app/app.component.ts	Removes v21-zoneless root component from the older fixture.
test-angular-versions/v21-standalone/src/app/app.component.ts	Removes v21-standalone root component from the older fixture.
package.json	Updates root scripts/deps/peers for Angular v22 + adds Angular CLI workspace support.
ng-package.json	Normalizes formatting for ng-packagr config.
downstream_projects.json	Switches downstream fixtures from Angular 21/TS 5.9 to Angular 22/TS 6.
angular.json	Adds root Angular CLI workspace config for building the library via ng build.

Suppressed comments (4)

package.json:129

• dependencies.tslib is set to ^2.3.0 while devDependencies used ^2.8.1 in this same file. These should be aligned to a single version to avoid inconsistent installs.

  "dependencies": {
    "tslib": "^2.3.0"
  }

test-angular-versions/v22/package.json:11

• These scripts still point Playwright at dist/v21/browser, but this project is named v22. This looks like a leftover from the v21 copy and will be confusing (and can cause dist output collisions) unless angular.json is intentionally still emitting to dist/v21.
  test-angular-versions/v22-zoneless/package.json:11
• These scripts still point Playwright at dist/v21-zoneless/browser, but this project is named v22-zoneless. If this app is meant to represent Angular v22, the output directory and DIST_PATH should be updated consistently to avoid confusion/collisions.
  test-angular-versions/v22-standalone/package.json:11
• These scripts still point Playwright at dist/v21-standalone/browser, but this project is named v22-standalone. The output directory and DIST_PATH should be updated consistently if this is intended to be the v22 standalone test app.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[lindolo25]

Hi @christopherthielen

Thanks for your time reviewing this. Yes I think having the explicit value of change detection set for the component will give clarity for readers of what's the intended value. And yes the default value changed from Eager to OnPush with this new version. I'll add the change myself with a new commit.

Regarding what value to use, in my opinion should be OnPush. I Added this value before withing commit a647147 and reverted it with commit 2ca4491. As you said both of this commits are part of the changes for v21. Why I removed it, was my lack of understanding at the time. I was unsure of what effect this change could have, so I played it save. Since then I've tested and used the OnPush withing the projects I work with and I'm confident the UiView will continue to work as expected.

• UIView already handles how component's inputs are set, when a component ref is created. There will be no impact here.
• Withing it's template, is using signals for changes that need to be detected. This will be OK.
• And all testing pass.

please let me know your thoughts

[lindolo25]

Well not all tests are passing! I need to investigate more.

[christopherthielen]

OK, let me know how you want to proceed.

I'm only aware of the differences between the two, but I do not understand nuances that may effect edge cases. If it makes sense to ship with Eager, that's fine by me.

[christopherthielen]

Ran this through a 🤖 robot 🤖 and it thinks the failing tests are due to child components doing direct variable mutations in async updates without a markForCheck call:

What happens:

1. The routed AppComponent owns a dynamically created dialog. In DialogComponent.ngOnInit, a timer/promise waits 50 ms and then does a plain this.visible = true.
2. Zone schedules a change-detection pass, but UIView is now a clean OnPush ancestor. Angular skips that entire routed subtree. The fact that the routed components themselves are Eager/Default does not override a clean OnPush ancestor.
3. The dialog’s @HostBinding('class.active') therefore never reaches the DOM. Its CSS leaves the content at top: -200px instead of moving it to top: 4em (dialog CSS), exactly matching CI’s “button is outside of the viewport.”

I reproduced the failing test locally. Adding ChangeDetectorRef.markForCheck() immediately after visible = true makes it pass.

My recommendation: ship UIView as explicit ChangeDetectionStrategy.Eager for 22. This isn’t merely an internal optimization—the outlet becomes an OnPush boundary around user-owned application trees.

UIView cannot generically know about every later async mutation below it, so adding another markForCheck() around route creation won’t solve the class of failures. We could support explicit OnPush later, but it should be an intentional breaking behavior with focused tests for timer/Promise updates, manual subscriptions, uiOnParamsChanged, dynamic child components/overlays, nested views, projected content, and both zone/zoneless apps.

Based on my limited understanding, this seems appropriate to me. Ship with Eager. If it seems useful add an opt-in OnPush mode (this can be done later as a point release).

[lindolo25]

Hi @christopherthielen!

Sorry for the delay, I've been busy these last few days. I'm making the change to use Eager. I'll investigate the failing test in details later. With Eager I'm getting another error with the downstream tests, this time is not a failing test but rather the build. Apparently the build for the Sample app because is using Angular v21 and trying to import the partial build for Angular v22, It does not know how to handle the ChangeDetection.Eager. I'm creating an update for the sample app so the tests can properly run in Angular v22 and azure there is no regression.

I'll add an update here when is ready, thanks for the Help.

[lindolo25]

Hi @christopherthielen!

linking here the PR for the sample app. Once merged, I'll add the update to Eager here to trigger the tests. I ran it from my side and is working. Hopefully it will work here as well!

ui-router/sample-app-angular#800

[christopherthielen]

@lindolo25 I merged ui-router/sample-app-angular#800 , thanks!

[lindolo25]

Hi @christopherthielen, thanks for all the help! All tests are passing, I'm ready to merge. I'm going to review how the release is done, but at least for this one I'll need your help.