Support NoopAnimationsModule

code/frameworks/angular/src/client/angular-beta/AbstractRenderer.ts

@@ -1,6 +1,11 @@
 import { ApplicationRef, enableProdMode, NgModule } from '@angular/core';
 import { bootstrapApplication } from '@angular/platform-browser';
-import { provideAnimations, BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import {
+  provideAnimations,
+  BrowserAnimationsModule,
+  provideNoopAnimations,
+  NoopAnimationsModule,
+} from '@angular/platform-browser/animations';
 
 import { BehaviorSubject, Subject } from 'rxjs';
 import { stringify } from 'telejson';
@@ -101,12 +106,8 @@ export abstract class AbstractRenderer {
     const hasAnimationsDefined =
       !!storyFnAngular.moduleMetadata?.imports?.includes(BrowserAnimationsModule);
 
-    if (hasAnimationsDefined && storyFnAngular?.moduleMetadata?.imports) {
-      // eslint-disable-next-line no-param-reassign
-      storyFnAngular.moduleMetadata.imports = storyFnAngular.moduleMetadata.imports.filter(
-        (importedModule) => importedModule !== BrowserAnimationsModule
-      );
-    }
+    const hasNoopAnimationsDefined =
+      !!storyFnAngular.moduleMetadata?.imports?.includes(NoopAnimationsModule);
 
     if (
       !this.fullRendererRequired({
@@ -135,6 +136,7 @@ export abstract class AbstractRenderer {
     const applicationRef = await bootstrapApplication(application, {
       providers: [
         ...(hasAnimationsDefined ? [provideAnimations()] : []),
+        ...(hasNoopAnimationsDefined ? [provideNoopAnimations()] : []),
         storyPropsProvider(newStoryProps$),
       ],
     });

code/frameworks/angular/src/client/angular-beta/utils/PropertyExtractor.ts

@@ -1,5 +1,10 @@
 import { CommonModule } from '@angular/common';
 import { Provider } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import {
+  BrowserAnimationsModule,
+  NoopAnimationsModule,
+} from '@angular/platform-browser/animations';
 import { NgModuleMetadata } from '../../types';
 import { isDeclarable, isStandaloneComponent } from './NgComponentAnalyzer';
 import { isComponentAlreadyDeclared } from './NgModulesAnalyzer';
@@ -8,6 +13,28 @@ const uniqueArray = (arr: any[]) => {
   return arr.flat(Number.MAX_VALUE).filter((value, index, self) => self.indexOf(value) === index);
 };
 
+/** Restricted Imports */
+const RESTRICTED_IMPORTS = [
+  /**
+   * BrowserAnimationsModule imports BrowserModule, which is restricted,
+   * because bootstrapApplication API, which mounts the component to the DOM,
+   * automatically imports BrowserModule
+   */
+  BrowserAnimationsModule,
+  /**
+   * NoopAnimationsModule imports BrowserModule, which is restricted,
+   * because bootstrapApplication API, which mounts the component to the DOM,
+   * automatically imports BrowserModule
+   */
+  NoopAnimationsModule,
+  /**
+   * BrowserModule is restricted,
+   * because bootstrapApplication API, which mounts the component to the DOM,
+   * automatically imports BrowserModule
+   */
+  BrowserModule,
+];
+
 /**
  * Extract Imports from NgModule
  *
@@ -21,7 +48,10 @@ const uniqueArray = (arr: any[]) => {
 export const extractImports = (metadata: NgModuleMetadata) => {
   const imports = [CommonModule];
 
-  const modules = (metadata.imports || []).flat(Number.MAX_VALUE);
+  const modules = (metadata.imports || [])
+    .flat(Number.MAX_VALUE)
+    .filter((importedModule) => !RESTRICTED_IMPORTS.includes(importedModule));
+
   const withProviders = modules.filter((moduleDef) => !!moduleDef?.ngModule);
   const withoutProviders = modules.filter((moduleDef) => !withProviders.includes(moduleDef));
 

code/frameworks/angular/template/stories/core/moduleMetadata/with-noop-browser-animations.stories.ts

@@ -0,0 +1,27 @@
+import { Meta, StoryFn } from '@storybook/angular';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { within, userEvent } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
+import { OpenCloseComponent } from './angular-src/open-close-component/open-close.component';
+
+export default {
+  component: OpenCloseComponent,
+} as Meta;
+
+export const WithNoopBrowserAnimations: StoryFn = () => ({
+  template: `<app-open-close></app-open-close>`,
+  moduleMetadata: {
+    declarations: [OpenCloseComponent],
+    imports: [NoopAnimationsModule],
+  },
+});
+
+WithNoopBrowserAnimations.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const opened = canvas.getByText('The box is now Open!');
+  expect(opened).toBeDefined();
+  const submitButton = canvas.getByRole('button');
+  await userEvent.click(submitButton);
+  const closed = canvas.getByText('The box is now Closed!');
+  expect(closed).toBeDefined();
+};