Angular 10 - Function calls are not supported in decorators but '' was called

[madmacc]

I have created an Ionic 5 Angular 10 project and I am importing some animations as I have done for previous projects. However I am getting the error below. Any ideas what is causing this?
Similar code works fire with another Ionic 5 Angular 9 project I created.

Is this an Angular 10 issue or a typescript issue perhaps?

Error during template compile of 'AppComponent' Function calls are not supported in decorators but 'slideInLeftOnEnterAnimation' was called

If I remove the brackets I get the following error:

ERROR Error: Unable to resolve animation metadata node #undefined at visitDslNode (browser.js:554) at AnimationAstBuilderVisitor.build (browser.js:695) at buildAnimationAst (browser.js:685) at InjectableAnimationEngine.registerTrigger (browser.js:3856) at registerTrigger (animations.js:166) at Array.forEach () at AnimationRendererFactory.createRenderer (animations.js:170) at createRootComponentView (core.js:18357) at ComponentFactory$1.create (core.js:22157) at ApplicationRef.bootstrap

    import { slideInLeftOnEnterAnimation } from 'angular-animations';

    @Component({
      selector: 'app-root',
      templateUrl: 'app.component.html',
      styleUrls: ['app.component.scss'],
      animations: [
        slideInLeftOnEnterAnimation()
      ]
    })

  Ionic CLI                     : 6.11.11
   Ionic Framework               : @ionic/angular 5.3.5
   @angular-devkit/build-angular : 0.1000.8
   @angular-devkit/schematics    : 10.0.8
   @angular/cli                  : 10.0.8
   @ionic/angular-toolkit        : 2.3.3
   angular-animations": "^0.11.0

[filipows]

Hi @madmacc ,

Can you try for a test, downgrading the version of angular-animations from 0.11.0 -> 0.0.10 and checking if the same error occurs?

[madmacc]

@filipows Thanks for the fast response! Just tried that and same issues with or without brackets.

[filipows]

Thanks @madmacc

The brackets should be there. I'm not sure though what could be the issue. Can you try another test, to assign the animation function to a variable before using it in the decorator? For ex:

   const slideAnimation = slideInLeftOnEnterAnimation();

   @Component({
      selector: 'app-root',
      templateUrl: 'app.component.html',
      styleUrls: ['app.component.scss'],
      animations: [
        slideAnimation
      ]
    })

[madmacc]

@filipows now I get the following in the browser:

ERROR Error: The provided animation trigger "slideAnimation" has not been registered!

[madmacc]

Also I tried it with a brand new Angular 10 application just created and it has the same issue.

[madmacc]

Ok so it turns out that even if I use the variable I get the error: Function calls are not supported in decorators but 'slideInLeftOnEnterAnimation' was called However with or without the variable I can serve the project and the animation works fine even though I have the error in my code editor.

Not sure if I will be able to do a production build though.

Also the variable has to have the name "slideInLeftOnEnter" or I get an error in the browser.

[filipows]

Hi @madmacc,

The error in the editor is something I have come across. It should disappear once you compile the app e.g. run ng build.

The animation functions used in the decorator are statically analyzable and after the compilation, the errors should be gone and it shouldn't cause any issues in the production build.

So far I haven't found any solution for errors being shown in the editor until running the compilation step.

[oscarreno]

I have the same issue. Hope it gets solved soon.

[clementgpro]

That's strange because the demo-app works with Angular 10 https://github.com/filipows/angular-animations/blob/master/demo-app/package.json#L15

[ruizuikeda]

Same: 10.2.0

Angular CLI: 10.2.0
Node: 12.19.0
OS: linux x64

Angular: 10.2.3
... animations, common, compiler, compiler-cli, core, forms
... language-service, localize, platform-browser
... platform-browser-dynamic, router, service-worker
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1002.0
@angular-devkit/build-angular   0.1002.0
@angular-devkit/core            10.2.0
@angular-devkit/schematics      10.2.0
@angular/cdk                    10.2.7
@angular/cli                    10.2.0
@angular/flex-layout            10.0.0-beta.32
@angular/material               10.2.7
@schematics/angular             10.2.0
@schematics/update              0.1002.0
rxjs                            6.6.3
typescript                      4.0.5

[juanDaniel3332133]

downgrading to version 0.0.10 works for angular 9. I was messing around for several hours.

[davoam]

I also had this issue with Angular 9 and library version 0.11.0. Downgrading to 0.0.10 helped

[JesseZomer]

any chance this will get solved without having to downgrade?

[andrewpayment]

@filipows the issue is due to the fact that Angular 10 uses Ivy by default and the new compiler uses AOT. Anything in decorators should be static I believe.

This SO post talks about it further, but I think someone would have to write all the functions in the library to be static.

https://stackoverflow.com/a/57553780

[cihancelen]

I am having this problem too.

My angular animations version is 11.0.1.

[Dinesh3027]

I have the same issue. I'm using Angular 9+.

I resolved it by doing following steps:

• As per above comment from @filipows, downgrade the angular-animations from 0.11.0 to 0.0.10 in package.json file and package-lock.json file
• Then run the command npm install
• Now ng serve --open
• Error should gone now

[Zahen]

I have the same issue. I'm using Angular 11+.

Resolved by downgrading angular-animations from 0.11.0 to 0.0.10.

For maintainers, it would be nice to upgrade the library according to prevent this downgrading for projects with Angular 9+, thank you.

[arnoldsi-vii]

@filipows it can be fixed by:

"angularCompilerOptions": {
    "enableIvy": false
}

BUT, I don't think it's a good solution, not every library running Ivy