[Angular][Tech-debt] Migrate off deprecated @angular/animations DSL + animations modules (Angular 22 — SonarQube S1874 ×85) #686

New Issue

2026-07-17T22:30:39Z

spikerj commented

2026-07-17 22:30:39 +00:00

Context

The SonarQube angular triage sweep (project learn.spikersoft.com) surfaces ~285 typescript:S1874 ("deprecated API") findings. The dominant cluster (~85) is Angular 22's deprecation of the @angular/animations package, split into two groups:

1. Imperative animation DSL (~55 findings) — trigger, state, style, animate, transition (and their overload signatures) imported from @angular/animations. Concentrated in components that define animations: [...] metadata, e.g. book-shelf.component.ts (10). Angular 22 deprecates the whole imperative DSL in favor of native CSS animations / the CSS-based approach.

2. Animations providers/modules (~30 findings) — BrowserAnimationsModule (23), NoopAnimationsModule (29 across app+specs), provideNoopAnimations (16 + 17 signature). Note provideNoopAnimations is itself deprecated, so this isn't a simple Module → provideX() swap — it's part of the same move away from the animations package.

Why this is NOT in the mechanical sweep

Unlike unused-imports / replaceAll / redundant-| undefined (handled as small PRs), this is a behavior-sensitive migration: each trigger() animation must be re-expressed as CSS (keyframes/transitions), and the module→provider changes touch bootstrap + every TestBed that imports NoopAnimationsModule. Getting it wrong silently drops or changes UI animations. It needs its own scoped effort with visual verification, not a rubber-stamp sweep PR.

Proposed approach (for a future PR set)

Inventory all animations: [...] blocks; port each trigger to CSS classes/@starting-style/transitions on the host or template.
Replace BrowserAnimationsModule bootstrap usage with the CSS approach (or provideAnimationsAsync() if any DSL must remain temporarily).
Sweep TestBed specs off NoopAnimationsModule/provideNoopAnimations.
Verify animations visually (book-shelf flip/hover, dialogs) before/after.

Verdict

Legitimate deprecation, deferred by design — filed so it isn't lost. The sweep will leave these S1874 findings open (not false-positived) pending this ticket. Cross-refs the Angular 22 adoption epic (#662).

## Context The SonarQube angular triage sweep (project `learn.spikersoft.com`) surfaces ~285 `typescript:S1874` ("deprecated API") findings. The dominant cluster (~85) is Angular 22's deprecation of the **`@angular/animations` package**, split into two groups: **1. Imperative animation DSL (~55 findings)** — `trigger`, `state`, `style`, `animate`, `transition` (and their overload signatures) imported from `@angular/animations`. Concentrated in components that define `animations: [...]` metadata, e.g. `book-shelf.component.ts` (10). Angular 22 deprecates the whole imperative DSL in favor of **native CSS animations / the CSS-based approach**. **2. Animations providers/modules (~30 findings)** — `BrowserAnimationsModule` (23), `NoopAnimationsModule` (29 across app+specs), `provideNoopAnimations` (16 + 17 signature). Note `provideNoopAnimations` is *itself* deprecated, so this isn't a simple `Module → provideX()` swap — it's part of the same move away from the animations package. ## Why this is NOT in the mechanical sweep Unlike unused-imports / `replaceAll` / redundant-`| undefined` (handled as small PRs), this is a **behavior-sensitive migration**: each `trigger()` animation must be re-expressed as CSS (keyframes/transitions), and the module→provider changes touch bootstrap + every `TestBed` that imports `NoopAnimationsModule`. Getting it wrong silently drops or changes UI animations. It needs its own scoped effort with visual verification, not a rubber-stamp sweep PR. ## Proposed approach (for a future PR set) - [ ] Inventory all `animations: [...]` blocks; port each `trigger` to CSS classes/`@starting-style`/transitions on the host or template. - [ ] Replace `BrowserAnimationsModule` bootstrap usage with the CSS approach (or `provideAnimationsAsync()` if any DSL must remain temporarily). - [ ] Sweep `TestBed` specs off `NoopAnimationsModule`/`provideNoopAnimations`. - [ ] Verify animations visually (book-shelf flip/hover, dialogs) before/after. ## Verdict **Legitimate deprecation, deferred by design** — filed so it isn't lost. The sweep will leave these S1874 findings open (not false-positived) pending this ticket. Cross-refs the Angular 22 adoption epic (#662).

spikerj commented

2026-07-22 02:46:00 +00:00

Verified complete on master. @angular/animations is fully removed:

Not in package.json (dependency dropped).
No real imports/DSL usages remain in projects or libraries — the only two matches are explanatory comments noting NoopAnimationsModule was replaced.

Landed via the A22 epic (#725): spikersoft-angular #448 ("chore(a22): remove deprecated @angular/animations") + #452 ("strip removed @angular/animations from 46 straggler specs"), both merged to master. The S1874 (×85) animations deprecation findings are cleared with the package removal. Closing.

Verified complete on `master`. `@angular/animations` is fully removed: - Not in `package.json` (dependency dropped). - No real imports/DSL usages remain in `projects` or `libraries` — the only two matches are explanatory comments noting `NoopAnimationsModule` was replaced. Landed via the A22 epic (#725): spikersoft-angular **#448** ("chore(a22): remove deprecated @angular/animations") + **#452** ("strip removed @angular/animations from 46 straggler specs"), both merged to `master`. The S1874 (×85) animations deprecation findings are cleared with the package removal. Closing.

spikerj closed this issue

2026-07-22 02:46:05 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: spikerj/spikersoft-issues#686