In Summary
At the start, the view fades in when using ES5 (ES5 Example)
The view does NOT fade in when utilizing Typescript import (Typescript and ES6 Import Example)
I am currently exploring Typescript, ES6 modules, and their integration. Most aspects work well, but I'm facing an issue with animating the ui-view using ngAnimate. When using ES6 modules and the import statement, it appears that dependencies are lazy loaded, causing ngAnimate to not function during the initial page load. However, once the page is fully loaded, the animation works as expected when transitioning views.
To demonstrate this behavior, I have created two Plunkers - one with an app in plain ES5 and another with a Typescript setup using SystemJS and imports for dependencies.
Here is the ES5 example. Upon running this Plunker, you will observe the view fading in at the beginning. This effect is achieved by including files via script tags in the index.html file, with animations defined in CSS:
ui-view.ng-enter {
animation: fadeIn .5s ease both;
animation-delay: .3s;
}
ui-view.ng-leave {
animation: fadeOut .5s ease both;
}
Here is the Typescript example. You may notice that the view doesn't fade in, despite utilizing the same animation structure. The difference lies in the usage of Typescript and ES6 modules imported via import. It seems that with import, ngAnimate may not be fully or immediately loaded, possibly due to lazy loading.
I'm keen on getting this technology stack to work seamlessly, as it offers a more enjoyable and modern development experience. Any suggestions?