Storybook: [Angular] Storybook fails to perform animation

[evanliomain]

Issue details

I use storybook along with @angular/material.
This ui framework use a lot of angular animation, that require the _BrowserAnimationsModule_ instead of just _BrowserModule_.

And so, it throw multiple Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application. errors and can block some animation.

I expect to have no error and trigger animation.

I figure out that the bug disapear when I replace BrowserModule by BrowserAnimationsModule in @storybook/angular/src/client/preview/angular/helpers.ts :

L10:

- import { BrowserModule } from '@angular/platform-browser';
+ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

L150:

-    imports: [BrowserModule, FormsModule, ...moduleMetadata.imports],
+    imports: [BrowserAnimationsModule, FormsModule, ...moduleMetadata.imports],

Steps to reproduce

In a storybook project for angular, add this story :

import { storiesOf } from '@storybook/angular';
import { Component } from '@angular/core';
import { MatInputModule } from '@angular/material/input';

@Component({
  selector: 'app-simple-input',
  template: `
  <mat-form-field>
    <input matInput placeholder="test">
  </mat-form-field>`
})
export class SimpleInputComponent {}

storiesOf('SimpleInput', module).add('test', () => ({
  moduleMetadata: {
    imports: [MatInputModule]
  },
  component: SimpleInputComponent
}));

• Try to fill the input
  This error is trigger:
  Error: Found the synthetic property @transitionMessages. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application. at checkNoSyntheticProp (platform-browser.js:2991)

Please specify which version of Storybook and optionally any affected addons that you're running

• @storybook/angular 3.4.0-alpha.1

[alterx]

@evanliomain, you need to include the module yourself. I see you're already including the MatInputModule. You need to do the same with the BrowserAnimationsModule.

import { storiesOf } from '@storybook/angular';
import { Component } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatInputModule } from '@angular/material/input';

@Component({
  selector: 'app-simple-input',
  template: `
  <mat-form-field>
    <input matInput placeholder="test">
  </mat-form-field>`
})
export class SimpleInputComponent {}

storiesOf('SimpleInput', module).add('test', () => ({
  moduleMetadata: {
    imports: [MatInputModule, BrowserAnimationsModule]
  },
  component: SimpleInputComponent
}));

I've successfully tested this with the latest alpha but it should work with 3.4.0-alpha.1

[evanliomain]

Yes it work :+1:
Thanks @alterx

[alterx]

Perfect!