NativeScript/angular

Animations do not run in Angular 17

JWiseCoder opened this issue · 6 comments

JWiseCoder commented

We have a number of angular animations in our app, and when I update to Angular 17, the animations stop working. They are complex animations with multiple triggers and transitions, but none of it is running. Even if I put in a transition like this at the top of my triggers:

            transition((from, to) => {
                console.log('test transition', from, to);
                return false;
            }, group([])),

That function never runs. I haven't changed anything between versions and it is broken on both iOS and Android, so something must have changed with how Angular does animations.

JWiseCoder commented

There are some related problems still unaddressed in this issue.

Though that issue isn't what is causing this one. I have a patch that I use to fix the problems in #95.

JWiseCoder commented

@NathanWalker, is there any update on this?

  • 👍1
SmailHammour commented

Any news on this?

JWiseCoder commented

OK, I've worked out what the issues were for the animations. Or at least, I got them working for me, but I can't patch it properly (yet). All I can do is mod the node_modules file for nativescript/angular, and the animations will work.

Here are the changes in nativescript-angular.mjs:

At the top of the file, I add ɵAnimationRendererFactory to the imports for '@angular/animations/browser':

import { ɵAnimationRendererFactory, ɵAnimationEngine, ɵWebAnimationsStyleNormalizer, AnimationDriver, ɵAnimationStyleNormalizer } from '@angular/animations/browser';

Then an import from '@angular/animations':

import { AnimationBuilder, ɵBrowserAnimationBuilder } from '@angular/animations';

There's a lot of commented code, so I had to uncomment the following (with some changes based on the imports):

export function instantiateRendererFactory(renderer, engine, zone) {
  return new ɵAnimationRendererFactory(renderer, engine, zone);
}

{ provide: AnimationBuilder, useClass: ɵBrowserAnimationBuilder },

            {
              provide: RendererFactory2,
              useFactory: instantiateRendererFactory,
              deps: [NativeScriptRendererFactory, ɵAnimationEngine, NgZone],
            },

NOTE: There are two instances of those providers, so I had to uncomment both:

{ provide: AnimationBuilder, useClass: ɵBrowserAnimationBuilder },

                        {
                          provide: RendererFactory2,
                          useFactory: instantiateRendererFactory,
                          deps: [NativeScriptRendererFactory, ɵAnimationEngine, NgZone],
                        },

The last part is a bug fix for something that changed in Angular. Apparently the first param of AnimationEngine was changed from the bodyNode to the doc, so we need to change the InjectableAnimationEngine constructor:

class InjectableAnimationEngine extends ɵAnimationEngine {
    constructor(doc, driver, normalizer) {
        super(doc, driver, normalizer);
    }

That's it. Just those changes, and the animations work like before. Is it possible to get similar changes into an ns/angular update?

Attn: @NathanWalker

darklight365 commented

PR created to correct this issue: #132
cc: @NathanWalker, @edusperoni