fix(platform-browser): automatically disable animations on the server (#59762)

crisbeto · alxhub · commit e6cb411e4393 · 2025-01-29T10:52:18.000-08:00
Uses `ngServerMode` to automatically disable browser animations on the server. This allows us to decouple `platform-server` from the animations package. PR Close #59762
diff --git a/packages/platform-browser/animations/async/src/providers.ts b/packages/platform-browser/animations/async/src/providers.ts
@@ -14,7 +14,6 @@ import {
   NgZone,
   RendererFactory2,
   ɵperformanceMarkFeature as performanceMarkFeature,
-  InjectionToken,
 } from '@angular/core';
 import {ɵDomRendererFactory2 as DomRendererFactory2} from '@angular/platform-browser';
 
@@ -51,6 +50,12 @@ export function provideAnimationsAsync(
   type: 'animations' | 'noop' = 'animations',
 ): EnvironmentProviders {
   performanceMarkFeature('NgAsyncAnimations');
+
+  // Animations don't work on the server so we switch them over to no-op automatically.
+  if (typeof ngServerMode !== 'undefined' && ngServerMode) {
+    type = 'noop';
+  }
+
   return makeEnvironmentProviders([
     {
       provide: RendererFactory2,
diff --git a/packages/platform-browser/animations/src/providers.ts b/packages/platform-browser/animations/src/providers.ts
@@ -71,20 +71,31 @@ const SHARED_ANIMATION_PROVIDERS: Provider[] = [
 
 /**
  * Separate providers from the actual module so that we can do a local modification in Google3 to
- * include them in the BrowserModule.
+ * include them in the BrowserTestingModule.
  */
-export const BROWSER_ANIMATIONS_PROVIDERS: Provider[] = [
-  {provide: AnimationDriver, useFactory: () => new WebAnimationsDriver()},
-  {provide: ANIMATION_MODULE_TYPE, useValue: 'BrowserAnimations'},
+export const BROWSER_NOOP_ANIMATIONS_PROVIDERS: Provider[] = [
+  {provide: AnimationDriver, useClass: NoopAnimationDriver},
+  {provide: ANIMATION_MODULE_TYPE, useValue: 'NoopAnimations'},
   ...SHARED_ANIMATION_PROVIDERS,
 ];
 
 /**
  * Separate providers from the actual module so that we can do a local modification in Google3 to
- * include them in the BrowserTestingModule.
+ * include them in the BrowserModule.
  */
-export const BROWSER_NOOP_ANIMATIONS_PROVIDERS: Provider[] = [
-  {provide: AnimationDriver, useClass: NoopAnimationDriver},
-  {provide: ANIMATION_MODULE_TYPE, useValue: 'NoopAnimations'},
+export const BROWSER_ANIMATIONS_PROVIDERS: Provider[] = [
+  // Note: the `ngServerMode` happen inside factories to give the variable time to initialize.
+  {
+    provide: AnimationDriver,
+    useFactory: () =>
+      typeof ngServerMode !== 'undefined' && ngServerMode
+        ? new NoopAnimationDriver()
+        : new WebAnimationsDriver(),
+  },
+  {
+    provide: ANIMATION_MODULE_TYPE,
+    useFactory: () =>
+      typeof ngServerMode !== 'undefined' && ngServerMode ? 'NoopAnimations' : 'BrowserAnimations',
+  },
   ...SHARED_ANIMATION_PROVIDERS,
 ];
