ng-animate: not working with AoT

Hi,

i get following error when i try to compile with AoT:

ERROR in Error: Error encountered resolving symbol values statically. Only initialized variables and constants can be referenced because the value of this variable is needed by the template compiler (position 4:22 in the original .ts file), resolving symbol flipInY in C:/workspace/Node/EagleWeb/node_modules/ng-animate/lib/flippers.d.ts, resolving symbol flipInY in C:/workspace/Node/EagleWeb/node_modules/ng-animate/lib/index.d.ts, resolving symbol animationLogin in C:/workspace/Node/EagleWeb/src/app/atomic/pages/login-page/login.page.ts, resolving symbol animationLogin in C:/workspace/Node/EagleWeb/src/app/atomic/pages/login-page/login.page.ts, resolving symbol animationLogin in C:/workspace/Node/EagleWeb/src/app/atomic/pages/login-page/login.page.ts, resolving symbol animationLogin in C:/workspace/Node/EagleWeb/src/app/atomic/pages/login-page/login.page.ts, resolving symbol LoginPageComponent in C:/workspace/Node/EagleWeb/src/app/atomic/pages/login-page/login.page.ts, resolving symbol LoginPageComponent in C:/workspace/Node/EagleWeb/src/app/atomic/pages/login-page/login.page.ts
    at positionalError (C:\workspace\Node\EagleWeb\node_modules\@angular\compiler\@angular\compiler.es5.js:25243:2)
    at simplifyInContext (C:\workspace\Node\EagleWeb\node_modules\@angular\compiler\@angular\compiler.es5.js:25086:9)
    at StaticReflector.simplify (C:\workspace\Node\EagleWeb\node_modules\@angular\compiler\@angular\compiler.es5.js:25100:7)
    at StaticReflector.annotations (C:\workspace\Node\EagleWeb\node_modules\@angular\compiler\@angular\compiler.es5.js:24528:38)
    at NgModuleResolver.resolve (C:\workspace\Node\EagleWeb\node_modules\@angular\compiler\@angular\compiler.es5.js:14866:34)
    at CompileMetadataResolver.getNgModuleMetadata (C:\workspace\Node\EagleWeb\node_modules\@angular\compiler\@angular\compiler.es5.js:15521:58)
    at addNgModule (C:\workspace\Node\EagleWeb\node_modules\@angular\compiler\bundles\compiler.umd.js:24408:58)
    at C:\workspace\Node\EagleWeb\node_modules\@angular\compiler\bundles\compiler.umd.js:24419:14
    at Array.forEach (<anonymous>)
    at _createNgModules (C:\workspace\Node\EagleWeb\node_modules\@angular\compiler\@angular\compiler.es5.js:24388:8)
    at analyzeNgModules (C:\workspace\Node\EagleWeb\node_modules\@angular\compiler\bundles\compiler.umd.js:24293:14)
    at analyzeAndValidateNgModules (C:\workspace\Node\EagleWeb\node_modules\@angular\compiler\@angular\compiler.es5.js:24273:19)
    at AotCompiler.analyzeModulesAsync (C:\workspace\Node\EagleWeb\node_modules\@angular\compiler\bundles\compiler.umd.js:23937:46)
    at CodeGenerator.codegen (C:\workspace\Node\EagleWeb\packages\compiler-cli\src\codegen.ts:41:10)
    at Function.NgTools_InternalApi_NG_2.codeGen (C:\workspace\Node\EagleWeb\packages\compiler-cli\src\ngtools_api.ts:112:26)
    at _donePromise.Promise.resolve.then (C:\workspace\Node\EagleWeb\node_modules\@ngtools\webpack\src\plugin.js:386:44)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)
    at Function.Module.runMain (module.js:667:11)
    at startup (bootstrap_node.js:187:16)
    at bootstrap_node.js:607:3

Sample Code:

export function animationLogin(): AnimationTriggerMetadata {
  return trigger('login', [
    state(AnimationElementState.active, style({ opacity: 1 })),
    state(AnimationElementState.inactive, style({ opacity: 0 })),
    transition('inactive => active', useAnimation(flipInY, {
      params: {
        timing: 0.5
      }
    })),
    transition('active => inactive', useAnimation(flipOutX, {
      params: {
        timing: 0.5
      }
    }))
  ]);
}

@Component({
  selector:    'ta-login-page',
  styleUrls:   ['./login.page.scss'],
  templateUrl: './login.page.pug',
  animations:  [
    fadeInOut,
    animationFader(),
    animationZoomIn(),
    animationLogin()
  ]
})

without AoT it works fine.

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 1
Comments: 15 (7 by maintainers)

Most upvoted comments

I’ve managed to support AOT and updated peerDependencies for any version of Angular >= 4.2. Work has been done in #11 . I’ve also published a new version 0.3.2 so let me know if it has been solved also for you. Then I’ll merge the PR.

jiayihu on Jun 13, 2018

I’ve tried adding support for AOT but as always it’s a very painful and frustrating experience. There are currently strong limits with the AOT compiler ngc as reported here on Angular repo.

So in the end I wasn’t able to get it work without trying a complete rework of the lib. Currently I make a huge use of higher-order functions to avoid code duplication. Basically the compiler throws when I use a generic animation like in bounceInDirection, whereas it’s fine a not-generic animation with hardcoded values. Writing all the animations with the latter approach would lead to a huge duplication.

Basically I won’t support AOT for now, I’m fed up with Angular AOT shit. If anyone wants to try, PRs are welcome and I’d be glad to help, but I spent too much time myself with AOT.

For anyone else I recommend copying the implementation from lib and creating a not-generic animation with your hardcoded values.

jiayihu on Oct 7, 2017