Angular4 upgrade animation not working

Question

I have recently upgraded my angular app from angular2.4.0 to angular 4.0.0. I have followed this link It compile without any error, Only 3 warnings it gives. here is attached screenshot of warning.enter image description here But the animation not working. Please check what I am missing. Thanks in advance.

package.json

  "dependencies": {
    "@angular/animations": "^4.0.0",
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/compiler-cli": "^4.0.0",
    "@angular/core": "^4.0.0",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.0",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/platform-server": "^4.0.0",
    "@angular/router": "^4.0.0",
    "angular2-modal": "2.0.2",
    "core-js": "2.4.1",
    "font-awesome": "4.7.0",
    "jquery": "3.2.1",
    "ng2-translate": "2.5.0",
    "rxjs": "5.2.0",
    "typescript": "^2.2.2",
    "web-animations-js": "^2.2.2",
    "zone.js": "0.7.4"
  },

app.component.ts

import { Component } from '@angular/core';
import { Router, ActivatedRoute, ActivatedRouteSnapshot } from '@angular/router';
import { BaseComponent } from '../base/base.component';
import { ViewContainerRef, ViewEncapsulation } from '@angular/core';
import { trigger, transition, style, animate, state } from '@angular/animations';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';


@Component({
    selector: 'verification',
    templateUrl: 'app.component.html',
    providers: [BaseComponent],
    animations: [
        trigger('trans', [
            // What happens when toggleState is true
            // state('true' , style({ opacity: 1, transform: 'translateX(0)', offset: 0 })),
            state('true', style({ transform: 'translateY(0)' })),
            // What happens when toggleState is false
            // state('false', style({  opacity: 0, transform: 'translateX(100%)', offset: 0, position:'absolute', right:-9999 })),
            state('false', style({ transform: 'translateY(20%)' })),
            // transition
            transition('0 => 1', animate('0.2s 100ms ease-in')),
            transition('1 => 0', animate('0.3s 25ms ease-out'))
        ])
    ]
})
export class VerificationComponent {
    public verifySuccess:boolean;
    constructor(private router: Router, private route: ActivatedRoute, private base: BaseComponent) {
        this.verifySuccess = true;
    }

}

app.component.html

<div class="clearfix">
    <div class="backstretch">
    </div>
    <div class="vefification">
        <div class="verification-content">
            <div class="verification-main p-20" [@trans]="verifySuccess">
                    <div *ngIf="verifySuccess">                                        
                        <h3>YOU'RE ALL SET</h3>                    
                        <div class="form-group">
                            <button class="btn-resend-email" type="submit" (click)="verifySuccess=true">RESEND EMAIL</button>
                        </div>
                    </div>                   
            </div>
        </div>
    </div>
</div>

app.modulte.ts

import { NgModule }      from '@angular/core';
import { BrowserModule, Title } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
  imports:      [ BrowserModule,
                  BrowserAnimationsModule,  
                  BootstrapModalModule,
                   ],
  declarations: [ //components
                  VerificationComponent,
                  ]    })

export class AppModule { }

Answer 1

I recently ran in to a similar issue. And managed to solve it by changing my states - that trigger the animations - to strings.

I was using 0 and 1 as states to trigger the animation in 2.X. After upgrading to 4.X I didn't get errors, but it would not trigger animations properly. Switching to only strings made it work again. Since you seem to be using booleans I would try switching to strings and it might start working again for you.

So this.veryfySuccess could be 'no'/'yes' instead of true/false. You would also need to update your transition in the animation from 0 => 1 to no => yes as well as your state declarations within the trigger.

Answer 2

You don't need to import again the BrowserAnimationsModule in your app.component.ts. You should declare it once in your NgModule. You probably have some typo in your template because your upgrade seems okay.