Animations do not run in Angular 17

[JWiseCoder]

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]

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]

@NathanWalker, is there any update on this?

[SmailHammour]

Any news on this?

[JWiseCoder]

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]

PR created to correct this issue: https://github.com/NativeScript/angular/pull/132 cc: @NathanWalker, @edusperoni

[NathanWalker]

Huge thank you to @JWiseCoder @darklight365! https://github.com/NativeScript/angular/releases/tag/17.1.0