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.

[jiayihu]

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]

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.