angularjs - ngAnimate con Angular 1.4 + TypeScript no funciona durante la carga de la página

Resumen

La vista se desvanece al principio al usar ES5 (Ejemplo de ES5)

La vista NO aparece desvaneciéndose al usar la importación de Typescript (Ejemplo de importación de Typescript y ES6)

Actualmente estoy experimentando con Typescript, módulos ES6 y cómo integrar todas esas tecnologías. En la mayoría de los casos, todo funciona bien. Sin embargo, me gustaría animar el ui-view con ngAnimate, y aquí es donde surge el problema. De alguna manera, si estoy usando módulos ES6 y su instrucción import, parece que mis dependencias se cargan de manera diferida, de modo que ngAnimate no funcionará durante la carga inicial de la página. Una vez que la página se ha cargado, la animación funciona perfectamente, por ejemplo, animando la vista de entrada y salida si el usuario hace clic en un enlace. Lo que me gustaría ver es que el ui-view aparezca con un efecto de desvanecimiento al principio.

He configurado dos Plunker para demostrar ambos comportamientos, uno con una aplicación en el viejo ES5 y otro en Typescript, que utiliza SystemJS y la sentencia import para cargar sus dependencias.

Aquí está el ejemplo de ES5. Si ejecutas este Plunker notarás cómo la vista aparece gradualmente al principio. Todo lo que hice fue incluir los archivos mediante la etiqueta script en el index.html. La animación se realiza mediante CSS puro:

ui-view.ng-enter {
  animation: fadeIn .5s ease both;
  animation-delay: .3s;
}

ui-view.ng-leave {
  animation: fadeOut .5s ease both;
}

Aquí está el ejemplo de Typescript. Con suerte verás la diferencia, que la vista no se desvanecerá aunque use el mismo mecanismo de animación. La única diferencia aquí es que estoy usando Typescript (no debería ser el problema) y módulos ES6 que se importan mediante import. De alguna manera parece que si estoy usando import, ngAnimate no se carga completamente o tal vez ni siquiera se carga en absoluto en el momento en que se carga la página. ¿Tal vez se carga de forma diferida?

Realmente me gustaría hacer que esta pila funcione, porque es mucho más divertida y moderna. ¿Alguna idea?

Respuesta #1

Después de alguna investigación y con la ayuda de uno de los miembros del equipo de Angular, descubrí que ngAnimate desactiva todas las animaciones al cargar por defecto durante las dos primeras digestiones. Esto significa que si detecta que se están descargando activos remotos, sigue esperando hasta que estén listos. Esto ocurre de alguna manera cuando se usan módulos de Typescript/ES6. Puedes evitar esta situación y garantizar que todas las animaciones se ejecuten al arrancar, incluso aunque se estén descargando activos remotos, creando una directiva para habilitar las animaciones con $animate.enabled(true);. Puedes colocar la directiva en la etiqueta body o html. En el Plunker de arriba he agregado la directiva en la etiqueta body. Esto es lo que necesitas:

<body allow-animations-on-load>
  <ui-view></ui-view>
</body>

app.directive('allowAnimationsOnLoad', ['$animate', function($animate) {
  $animate.enabled(true);
}]);

También he actualizado el Plunker correspondiente. Como puedes ver, la animación ahora se está desvaneciendo en Bootstrap.