From 84c48649af70ac76ede7b1980fc9332bd5c30fcb Mon Sep 17 00:00:00 2001 From: Trevin Chow Date: Fri, 10 Apr 2026 01:09:49 -0700 Subject: [PATCH 1/3] refactor: migrate deprecated animation providers to async variants Replace provideAnimations() with provideAnimationsAsync() and provideNoopAnimations() with provideNoopAnimationsAsync() across the application and Storybook stories. The synchronous variants were deprecated in Angular 17. The async versions load animation code lazily, reducing the initial bundle. Fixes #6121 --- apps/client/src/main.ts | 4 ++-- libs/ui/src/lib/entity-logo/entity-logo.component.stories.ts | 4 ++-- .../symbol-autocomplete.component.stories.ts | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/apps/client/src/main.ts b/apps/client/src/main.ts index f596de5f4..3fbeb0935 100644 --- a/apps/client/src/main.ts +++ b/apps/client/src/main.ts @@ -22,7 +22,7 @@ import { import { MatSnackBarModule } from '@angular/material/snack-bar'; import { MatTooltipModule } from '@angular/material/tooltip'; import { bootstrapApplication } from '@angular/platform-browser'; -import { provideAnimations } from '@angular/platform-browser/animations'; +import { provideAnimationsAsync } from '@angular/platform-browser/animations/async'; import { RouterModule, TitleStrategy } from '@angular/router'; import { ServiceWorkerModule } from '@angular/service-worker'; import { provideIonicAngular } from '@ionic/angular/standalone'; @@ -79,7 +79,7 @@ import { environment } from './environments/environment'; ), LanguageService, ModulePreloadService, - provideAnimations(), + provideAnimationsAsync(), provideHttpClient(withInterceptorsFromDi()), provideIonicAngular(), provideMarkdown(), diff --git a/libs/ui/src/lib/entity-logo/entity-logo.component.stories.ts b/libs/ui/src/lib/entity-logo/entity-logo.component.stories.ts index 6c89718bd..399f89e17 100644 --- a/libs/ui/src/lib/entity-logo/entity-logo.component.stories.ts +++ b/libs/ui/src/lib/entity-logo/entity-logo.component.stories.ts @@ -1,6 +1,6 @@ import { CommonModule } from '@angular/common'; import { importProvidersFrom } from '@angular/core'; -import { provideNoopAnimations } from '@angular/platform-browser/animations'; +import { provideNoopAnimationsAsync } from '@angular/platform-browser/animations/async'; import { applicationConfig, Meta, StoryObj } from '@storybook/angular'; import { EntityLogoImageSourceServiceMock } from '../mocks/entity-logo-image-source.service.mock'; @@ -13,7 +13,7 @@ export default { decorators: [ applicationConfig({ providers: [ - provideNoopAnimations(), + provideNoopAnimationsAsync(), importProvidersFrom(CommonModule), { provide: EntityLogoImageSourceService, diff --git a/libs/ui/src/lib/symbol-autocomplete/symbol-autocomplete.component.stories.ts b/libs/ui/src/lib/symbol-autocomplete/symbol-autocomplete.component.stories.ts index de7a09a04..c9d92b499 100644 --- a/libs/ui/src/lib/symbol-autocomplete/symbol-autocomplete.component.stories.ts +++ b/libs/ui/src/lib/symbol-autocomplete/symbol-autocomplete.component.stories.ts @@ -9,7 +9,7 @@ import { NgControl, ReactiveFormsModule } from '@angular/forms'; -import { provideNoopAnimations } from '@angular/platform-browser/animations'; +import { provideNoopAnimationsAsync } from '@angular/platform-browser/animations/async'; import { applicationConfig, Meta, StoryObj } from '@storybook/angular'; import { HttpClientMock } from '../mocks/httpClient.mock'; @@ -75,7 +75,7 @@ export default { decorators: [ applicationConfig({ providers: [ - provideNoopAnimations(), + provideNoopAnimationsAsync(), importProvidersFrom(CommonModule, FormsModule, ReactiveFormsModule), { provide: NgControl, From 21aa086a796b80778e6b4e17ff7d02ad8dbea106 Mon Sep 17 00:00:00 2001 From: Trevin Chow Date: Fri, 10 Apr 2026 01:29:22 -0700 Subject: [PATCH 2/3] fix: use provideAnimationsAsync('noop') for Storybook stories provideNoopAnimationsAsync does not exist as a standalone export. The correct migration from provideNoopAnimations() is to use provideAnimationsAsync('noop') instead. --- libs/ui/src/lib/entity-logo/entity-logo.component.stories.ts | 4 ++-- .../symbol-autocomplete.component.stories.ts | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/libs/ui/src/lib/entity-logo/entity-logo.component.stories.ts b/libs/ui/src/lib/entity-logo/entity-logo.component.stories.ts index 399f89e17..cdc2561b6 100644 --- a/libs/ui/src/lib/entity-logo/entity-logo.component.stories.ts +++ b/libs/ui/src/lib/entity-logo/entity-logo.component.stories.ts @@ -1,6 +1,6 @@ import { CommonModule } from '@angular/common'; import { importProvidersFrom } from '@angular/core'; -import { provideNoopAnimationsAsync } from '@angular/platform-browser/animations/async'; +import { provideAnimationsAsync } from '@angular/platform-browser/animations/async'; import { applicationConfig, Meta, StoryObj } from '@storybook/angular'; import { EntityLogoImageSourceServiceMock } from '../mocks/entity-logo-image-source.service.mock'; @@ -13,7 +13,7 @@ export default { decorators: [ applicationConfig({ providers: [ - provideNoopAnimationsAsync(), + provideAnimationsAsync('noop'), importProvidersFrom(CommonModule), { provide: EntityLogoImageSourceService, diff --git a/libs/ui/src/lib/symbol-autocomplete/symbol-autocomplete.component.stories.ts b/libs/ui/src/lib/symbol-autocomplete/symbol-autocomplete.component.stories.ts index c9d92b499..f43ef5162 100644 --- a/libs/ui/src/lib/symbol-autocomplete/symbol-autocomplete.component.stories.ts +++ b/libs/ui/src/lib/symbol-autocomplete/symbol-autocomplete.component.stories.ts @@ -9,7 +9,7 @@ import { NgControl, ReactiveFormsModule } from '@angular/forms'; -import { provideNoopAnimationsAsync } from '@angular/platform-browser/animations/async'; +import { provideAnimationsAsync } from '@angular/platform-browser/animations/async'; import { applicationConfig, Meta, StoryObj } from '@storybook/angular'; import { HttpClientMock } from '../mocks/httpClient.mock'; @@ -75,7 +75,7 @@ export default { decorators: [ applicationConfig({ providers: [ - provideNoopAnimationsAsync(), + provideAnimationsAsync('noop'), importProvidersFrom(CommonModule, FormsModule, ReactiveFormsModule), { provide: NgControl, From 77788a8b8360bbde940469248a38066275043c7f Mon Sep 17 00:00:00 2001 From: Trevin Chow Date: Fri, 10 Apr 2026 07:54:23 -0700 Subject: [PATCH 3/3] refactor: migrate remaining Storybook stories to provideAnimationsAsync Migrate NoopAnimationsModule to provideAnimationsAsync('noop') in: - fire-calculator.component.stories.ts - tags-selector.component.stories.ts Moves from NgModule imports to standalone providers style, matching the pattern used in the other story files. --- .../fire-calculator/fire-calculator.component.stories.ts | 9 ++++++--- .../lib/tags-selector/tags-selector.component.stories.ts | 5 +++-- 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/libs/ui/src/lib/fire-calculator/fire-calculator.component.stories.ts b/libs/ui/src/lib/fire-calculator/fire-calculator.component.stories.ts index 0872c2aac..47934ba3a 100644 --- a/libs/ui/src/lib/fire-calculator/fire-calculator.component.stories.ts +++ b/libs/ui/src/lib/fire-calculator/fire-calculator.component.stories.ts @@ -8,7 +8,7 @@ import { provideNativeDateAdapter } from '@angular/material/core'; import { MatDatepickerModule } from '@angular/material/datepicker'; import { MatFormFieldModule } from '@angular/material/form-field'; import { MatInputModule } from '@angular/material/input'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; +import { provideAnimationsAsync } from '@angular/platform-browser/animations/async'; import { moduleMetadata } from '@storybook/angular'; import type { Meta, StoryObj } from '@storybook/angular'; import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader'; @@ -32,10 +32,13 @@ export default { MatFormFieldModule, MatInputModule, NgxSkeletonLoaderModule, - NoopAnimationsModule, ReactiveFormsModule ], - providers: [FireCalculatorService, provideNativeDateAdapter()] + providers: [ + FireCalculatorService, + provideAnimationsAsync('noop'), + provideNativeDateAdapter() + ] }) ] } as Meta; diff --git a/libs/ui/src/lib/tags-selector/tags-selector.component.stories.ts b/libs/ui/src/lib/tags-selector/tags-selector.component.stories.ts index d11175fd1..3beb7d19f 100644 --- a/libs/ui/src/lib/tags-selector/tags-selector.component.stories.ts +++ b/libs/ui/src/lib/tags-selector/tags-selector.component.stories.ts @@ -1,6 +1,6 @@ import { CommonModule } from '@angular/common'; import '@angular/localize/init'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; +import { provideAnimationsAsync } from '@angular/platform-browser/animations/async'; import { Meta, moduleMetadata, StoryObj } from '@storybook/angular'; import { GfTagsSelectorComponent } from './tags-selector.component'; @@ -10,7 +10,8 @@ export default { component: GfTagsSelectorComponent, decorators: [ moduleMetadata({ - imports: [CommonModule, NoopAnimationsModule] + imports: [CommonModule], + providers: [provideAnimationsAsync('noop')] }) ] } as Meta;