Angular 4.3.6 animations not working properly

Question

After migrating from Angular 4.3.5 to 4.3.6 something with animations went bad (with 4.3.5 was everything alright).

The problem is that, when the application starts, the login component is loaded, and that component has fadeIn animation to show up. After upgrade to the latest angular version, my component is hidden always after the application is loaded. I inspected the login component and found that it has style="display: none"; applied.

I am using external animations.ts file to store all my animations.

animations.ts

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

// Fade In Animation
export const fadeIn = trigger('fadeIn', [
    transition('void => *', [
        style({ opacity: 0 }),
        animate(500, style({ opacity: 1 }))
    ])
]);

login.component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

import { AuthenticationService } from '../../services/authentication.service';

import { fadeIn } from './../../shared/animations/animations';

@Component({
    moduleId: module.id,
    selector: 'app-authentication',
    templateUrl: './authentication.component.html',
    styleUrls: ['./authentication.component.css'],
    animations: [fadeIn]
})

export class AuthenticationComponent implements OnInit {

    constructor(private router: Router, private authenticationService: AuthenticationService) {}

    ngOnInit() {}
}

login.component.html

<div class="container" [@fadeIn]>
    <div class="loginContainer">
        <div class="loginHeader">Login</div>
        <form name="loginForm" #loginForm="ngForm" (ngSubmit)="loginForm.form.valid && logIn()" novalidate>
            <div class="loginBody">
                <span>content</span>
            </div>
        </form>
    </div>
</div>

The strangest part is even if I remove [@fadeIn] from HTML, my component is loaded hidden. Only after I remove animations: [fadeIn], from login.component.ts, then my login form shows up, just without any fadeIn animation.

NOTE: I am using [@fadeIn] without any expressions. But till 4.3.5 version it was working just fine.

Any suggestions guys?

Answer 1

Angular seems to fix issues with animation after version 4.4.1. Updating to 4.4.1 should resolve the issue.