angular animations not working in Visual Studio 2017 Template

Question

I am having problems getting animations to work with Angular 2 through Visual Studio 2017. I assume there is something simple I am missing here but cannot see it. I want to animate a few elements in and am testing the animations using a click event on a button, but nothing is firing;

my app.shared.module.ts is;

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';

import { AppComponent } from './components/app/app.component';
import { NavMenuComponent } from './components/shared/navmenu/navmenu.component';
import { HomeComponent } from './components/home/home.component';
import { ContactComponent } from './components/shared/contact/contact.component';
import { HeroComponent } from './components/shared/hero/hero.component';
import { FooterComponent } from './components/shared/footer/footer.component';

@NgModule({
    declarations: [
        AppComponent,
        NavMenuComponent,
        HomeComponent,
        ContactComponent,
        HeroComponent,
        FooterComponent
    ],
    imports: [
        CommonModule,
        HttpModule,
        FormsModule,
        NoopAnimationsModule,
        RouterModule.forRoot([
            { path: '', redirectTo: 'home', pathMatch: 'full' },
            { path: 'home', component: HomeComponent },
            { path: '**', redirectTo: 'home' }
        ])
    ]
})
export class AppModuleShared {
}

My component.html is;

<div class="hero">
    <div class="colour-overlay"></div>
    <div class="row">
        <div class="col-md-6">
            <h2 [@fadeInAnimation]="state">TEST1</h2>

            <button (click)="toggleMove()">Click Me!</button>
        </div>

        <div class="col-md-6">
            <contact></contact>
        </div>
    </div>

</div>

my component.ts is;

import { Component } from '@angular/core';
import { fadeInAnimation } from '../../../animations/fadeIn.animation';

@Component({
    selector: 'hero',
    templateUrl: './hero.component.html',
    styleUrls: ['./hero.component.css'],
    animations: [fadeInAnimation]
})
export class HeroComponent {

    state: string;

    constructor() {
        this.state = 'inactive';
    }

    toggleMove() {
        this.state = (this.state === 'inactive' ? 'active' : 'inactive');
    }
}

and finally the animation is;

import { trigger, state, animate, transition, style } from '@angular/animations';

export const fadeInAnimation =
    trigger('fadeInAnimation', [
        transition('void => *', [
            state('active', style({
                opacity: 1,
                transformX: 'transformX(0)'
            })),
            state('inactive', style({
                opacity: 0,
                transformX: 'transform(-100%)'
            })),
            transition('active => inactive', animate('300ms ease-out')),
            transition('inactive => active', animate('300ms ease-in'))
        ]),

    ]);

Can someone point out what I am doing wrong here please?

Answer 1

Since you had added NoopAnimationsModule, that will disable all animation of throughout your application. Inspite you should add BrowserAnimationsModule inside your main application module.

@NgModule({
    declarations: [
        ...
    ],
    imports: [
        CommonModule,
        HttpModule,
        FormsModule,
        // NoopAnimationsModule, //<- remove this
        BrowserAnimationsModule, //<- add this
        RouterModule.forRoot([...])
    ]
})
export class AppModuleShared {
}