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 f596de5f4e..3fbeb09352 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 6c89718bd2..399f89e17f 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 de7a09a042..c9d92b499f 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 399f89e17f..cdc2561b63 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 c9d92b499f..f43ef51626 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 0872c2aacc..47934ba3a3 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 d11175fd1c..3beb7d19f5 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;