animationbuilder | Easy way of writing Kivy Animations | Animation library

I have an app running in Angular 12 which shows a blank screen in Firefox and Edge, but runs in Chrome.

I have followed the instructions in polyfill.ts for

import 'classlist.js'; // Run npm install --save classlist.js. import 'web-animations-js'; // Run npm install --save web-animations-js.

My package.json looks like this

I have created an webapplication with Angular 11. Now, the customer will run it with IE11 (for showing a webpage on a big TV-Screen which still exists and have an integrated IE11-Browser)

for this,, I have set up all this

https://angular.io/guide/deployment#local-development-in-older-browsers

and uncommented the lines in polyfills.ts (and run the npm-commands):

The page takes a bit longer to load and for around 2-3 seconds the UI is destroyed as you can see on the screenshot 1 before it loaded , I have checked the data and the data is not that heavy.

What causes that issue that when the page loaded it is destroyed for around 2-3 seconds and after that the UI is already okay ?

Why is that it took 2-3 seconds for the UI to be loaded ? is there something wrong from my implementation ?

I hope someone can enlighten me with this one , it was bugging me for a couple of days. Thanks.

#This is how it longs every time the page is loaded but only for 2-3 seconds

SCREENSHOT 1

#after 2 - 3 seconds the UI is now is normal see screenshot 2

SCREENSHOT2

#html code snippet

I'm currently implementing Animations in an application and I face the problem that the timings for animation transitiions are stored in a json config file (I can't change that). There is a service that provides the values needed but since Angular Animations are declared in the @Component block I am not able to access the service.

I have a layout where I have two scroll views, one is a PageView which is used to display a list of pictures horizontally, the second is a SingleChildScrollView (maybe should be something else?), this scroll view is partially above the first one as initial position and can go completely over. Some screenshots to image this:

The problem is, if I make the 2nd scroll view take all page and add internal padding to it to make it the good height, the 2nd scroll view work as expected but the first one (witch is behind) isn't working anymore. The 2nd solution would be to wrap the SingleChildScrollView with a Padding widget to make it the good height and add Clip.none parameter to the scroll view, but in this case the scroll view cannot be scrolled in PageView zone even if the SingleChildScrollViewis over.

I wonder if someone already encountered a behavior like this and what is your solution.

Here my actual code with second solution:

I am working on angular 11. I am very new to jasmin/karma testing. I have created splash screen for my application. but while running ng test I am getting error for appComponent saying

I am trying to run a simple application in Office word add-in that I have built using Angular CLI 8.2. This application has a home page with a link. That link should route to another component. Routing works in Edge and IE 11 but doesn't work in word add-in. On loading the app in the word. I see the home page but I see this error in the Developers tool with no details. When I click on the link, it doesn't do anything. I think due to following error angular routing is not working.

OS: Windows 10, Microsoft Word : 2016 (16.0.5110)

Here is my package.json

I have a Carousel animation:

which is working fine but I need to pause it after a duration and call a function.

As soon as the cards change their position, I want to pause it, call my function, and as soon as the execution of that function is over, again restart the animation. And I want to do this indefinitely.

I am creating my animation using AnimationBuilder's build() function.

I tried to make use of AnimationPlayer's pause() and restart() methods but was not able to set them properly.

Here's Stackblitz link.

Here's my code:

.ts: animateCarousel() contains the animation definition.

I've been trying to run my Angular 8 application on IE11. So far, I have tried all the steps stated in this article, Angular 8 and IE 11

and still getting errors as this picture ->IE console

following are the related files :

Polyfills.ts: