chore(deps): Angular 21 to 22 migration

[Sourav-kashyap]

Description

Please include a summary of the change and which issue is fixed. Please also include relevant motivation and context. List any dependencies that are required for this change.

BREAKING CHANGE:
YES

Fixes # (issue)

Type of change

Please delete options that are not relevant.

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Intermediate change (work in progress)

How Has This Been Tested?

Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration

• Test A
• Test B

Checklist:

• Performed a self-review of my own code
• npm test passes on your machine
• New tests added or existing tests modified to cover all changes
• Code conforms with the style guide
• API Documentation in code was updated
• Any dependent changes have been merged and published in downstream modules

[rohit-sourcefuse]

Reviewed the migration end to end — read every non-lockfile change, and ran the gate CI doesn't: npm ci is clean (no ERESOLVE) and npm run build compiles + packages both libraries under ng22 / TS 6 with 0 errors. The migration itself is clean and correct. Two things block it from being safe to publish, plus a couple of follow-ups.

Must fix

1. No major version bump for a breaking peer change. All four published packages keep their current version while their @angular/* peers jump ^21 -> ^22.1.6 (search-client 11.0.0, search-element 11.0.1, user-onboarding-client 9.0.2, user-onboarding-element 9.0.2). ^22.1.6 drops ng21 entirely, so this is a breaking change for consumers. And lerna.json has conventionalCommits: true, so the chore(deps): commit type produces no version bump at all on the next lerna publish — this would ship breaking with no major. Land it with a BREAKING CHANGE: footer (or a feat! type) so lerna majors all four (11->12, 11->12, 9->10, 9->10), or bump manually. If ng21 needs to keep working instead, widen the peers to >=21 <23 rather than pinning ^22.

Should fix

2. @angular/flex-layout ~15.0.0-beta.42 kept under ng22. It's deprecated/archived (last targets ~ng15) and still actively used — FlexLayoutModule in search-element.module.ts and fxLayout/fxLayoutAlign in search.component.html. It installs fine (open peers, no ERESOLVE), but running a ng15-era, unmaintained layout lib against ng22's renderer is a latent runtime risk its dead upstream never tested. Migrate to CSS flex / @angular/cdk/layout, or track it as explicit debt.

3. No ng build / ng-packagr gate in CI. Both workflows run tests (main.yml installs Chrome for karma) + lint + audit, but nothing verifies the libraries compile and package under ng22/TS6 before publish. I verified locally that they do — but add a npm run build --workspaces job as a required check so it's proven in the pipeline, not just on a reviewer's machine.

Low

• packages/user-onboarding/tsconfig.json sets no explicit strict, so under TS 6 the library now compiles in full strict mode by default (the sandbox tsconfig explicitly sets strict: false; the lib doesn't — inconsistent intent). It builds clean today, but set strict explicitly so it can't silently flip on a future toolchain change.
• @types/uuid ^8.3.4 added to user-onboarding devDependencies with no matching uuid usage in the diff — looks unused.

What's good (verified)

The source changes are correct and safe: the parameters! / sessionId! definite-assignment assertions are compile-time only and .parameters is always set before execute(); the registerX(cmd: BaseCommand) and key: string typings replace implicit any with the right supertype; the scss bare @angular/material/... specifier is the recommended form. TS 5.9->6.0 strictness is handled properly (ignoreDeprecations: "6.0" is valid, and the source fixes are exactly what ng22/TS6 forces). Dep bumps are consistent across all manifests, lockfiles are coherent, and the sandbox preserveSymlinks + file: dep handling is correct.

Suggested fixes (copy-paste)

1. Force the major bump via the commit (lerna conventionalCommits picks it up). Reword the migration commit so lerna majors all four packages:

chore(deps)!: migrate Angular 21 -> 22

BREAKING CHANGE: peer dependencies now require @angular/* ^22; Angular 21 is no longer supported.

Then npx lerna version bumps search-client/search-element 11->12 and user-onboarding-client/element 9->10. (Or bump the four version fields by hand.) If instead you want to keep ng21 consumers working, don't bump — widen the peers in each lib package.json:

"peerDependencies": {
  "@angular/core": ">=21 <23",
  "@angular/common": ">=21 <23"
  // ...same widening for the rest
}

3. Add the missing build gate — in .github/workflows/pull_request.yml, after the npm ci step:

      - name: Build libraries
        run: npm run build --workspaces --if-present

(make it a required check so a lib that doesn't package under ng22/TS6 can't merge).

4. Make user-onboarding's strict setting explicit — in packages/user-onboarding/tsconfig.json compilerOptions:

// It builds clean under strict today; lock it so a toolchain default can't flip it.
"strict": true,

2. flex-layout off-ramp — swap the two directives for CSS (no runtime dep). e.g. in search.component.html:

<!-- before -->
<div fxLayout="row" fxLayoutAlign="space-between center"> ... </div>
<!-- after -->
<div class="row-between-center"> ... </div>

.row-between-center { display: flex; flex-direction: row; justify-content: space-between; align-items: center; }

Drop FlexLayoutModule from search-element.module.ts and the @angular/flex-layout peer/dep once the directives are gone. For responsive breakpoints use @angular/cdk/layout BreakpointObserver.

Net: the migration is solid — just needs the version handling sorted (the real blocker) before it publishes, plus the build gate and a flex-layout decision.