Skip to content

Angular 22 & Zoneless

Latest

Choose a tag to compare

@almothafar almothafar released this 07 Jun 21:07
· 36 commits to master since this release
a4466e3

[22.0.0] — 2026-06-07

A framework-only major: the public API is unchanged from 21.x. The consumer-visible changes are the
bumped Angular peer requirement and one dropdown-positioning fix (below).

⚠️ BREAKING CHANGES

  • Requires Angular 22. peerDependencies now require @angular/cdk, @angular/common and
    @angular/core ^22.0.0. Angular 21 and older projects must stay on @ngui/auto-complete@21 (or the
    matching major).

Fixed

  • Standalone <ngui-auto-complete> dropdown now overlays the content below it instead of pushing it
    down.
    When opening downward (the default), the list was rendered in normal document flow, so it grew
    its host and could scroll the page; it now floats (position: absolute; top: 100%), matching the
    existing upward (dropup) behavior. The directive's CDK-overlay path is unchanged. The float layer uses
    z-index: var(--ngui-ac-z-index, 10), so you can override --ngui-ac-z-index if it collides with other
    stacked UI.

Internal (development tooling only — no impact on consumers)

  • ng update to Angular 22: @angular/cli + @angular/build 22.0.0, @angular/cdk + @angular/material
    22.0.0, ng-packagr 22.0.0, angular-eslint 22.0.0, TypeScript 6.0.x.
  • Adopted ChangeDetectionStrategy.OnPush in the demo app and the spec test-host components, satisfying
    angular-eslint 22's new recommended prefer-on-push-component-change-detection rule with no opt-outs
    (the published library component was already OnPush).
  • TypeScript 6.0 config. TS 6 deprecates baseUrl, so the root tsconfig.json drops it and uses
    relative paths instead.
  • Enabled TypeScript strict mode (strict: true) and tightened types accordingly — replacing
    remaining anys with precise types (e.g. ReturnType<typeof setTimeout>, generics, unknown) and
    adding null-safety guards. No public API or runtime behavior change (#500).
  • Enabled strict template type-checking (strictTemplates: true in the root angularCompilerOptions),
    the natural companion to strict above. The library compiles cleanly under it; the only fix needed was a
    more precise type on a demo field (open-direction binding). No public API or runtime behavior change —
    this only tightens the library's own build (#503).
  • Went fully zoneless. Angular 22 is zoneless by default, so zone.js is removed entirely: the demo app
    bootstraps with provideZonelessChangeDetection() (zone.js polyfill dropped from angular.json), the
    unit-test harness drops zone.js/testing and configures provideZonelessChangeDetection() in TestBed,
    and zone.js is removed from dependencies. The published library was already zoneless-ready (signals +
    OnPush, never shipped zone.js), so this is purely a demo/test change with no consumer impact. The few
    fakeAsync/waitForAsync specs (which still require zone.js) were rewritten to plain async/await.
  • Bumped jasmine-core to 6.3.x (dev/test only).
  • Migrated the build to the @angular/build builders. angular.json now uses @angular/build:*
    (application, dev-server, ng-packagr, karma, extract-i18n) instead of the deprecated
    @angular-devkit/build-angular:* aliases, and the karma.conf.js files drop the old framework/plugin
    (the new karma builder wires these in itself). Removing the @angular-devkit/build-angular package
    (replaced by @angular/build) drops the legacy Webpack toolchain — ~370 fewer installed packages and 0
    audit vulnerabilities. Build output is unchanged.
  • Fixed the Cypress e2e config for TypeScript 6: projects/demo/cypress/tsconfig.json now sets an explicit
    rootDir, which TS 6 requires (TS5011) when an outDir is inherited and the included files span more
    than one directory. Without it, npm run cypress:run failed to compile the spec. Dev/test only.

What's Changed

  • refactor: enable TypeScript strict mode by @almothafar in #500
  • build: enable strict template type-checking by @almothafar in #503
  • feat!: upgrade to Angular 22 by @almothafar in #502
  • build: go fully zoneless (remove zone.js); upgrade jasmine-core by @almothafar in #505
  • fix: float the standalone component dropdown so it overlays content by @almothafar in #506
  • build: migrate to @angular/build builders, drop @angular-devkit/build-angular by @almothafar in #507
  • docs: document the --ngui-ac-z-index theming variable by @almothafar in #508
  • fix(cypress): set explicit rootDir for TypeScript 6 (TS5011) by @almothafar in #509
  • docs: clarify publish step, v22 migration, and license holders by @almothafar in #510

Full Changelog: 21.0.0...22.0.0