not working with AoT
Tenvan opened this issue · comments
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:3Sample 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.
Hi @Tenvan
thanks for reporting. I have an idea of the cause, it will be solved ASAP
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.
I tried this with angular 5.0.0 and it doesn't seem to be an issue anymore.
@j2L4e I've pointed myself to try it with Angular 5 since it claims to better support lambda functions.
Anyway do you mean that it works with ngc compiler or that using the lib in an Angular 5 application gives no problem?
I meant that AoT compiling (ngc) seems to be working now.
Okay I've tried running Angular 5 ngc compiler and it's like before. The build command does not throw, but generated metadata.json is not valid and trying to make an AOT build of the demo fails. Nevertheless I've pushed a new version 0.3.1 with the new generated metadata, hopefully more useful for someone.
This is still not working with AOT, right?
When i try to build with
ng build --prod --aot
it throws
Reference to a local (non-exported) symbols are not supported in decorators but 'bounceInY' was referenced in 'bounceInDown'
'bounceInDown' references 'bounceInDown'
'bounceInDown' references local variable bounceInY at ng-animate/lib/bouncing.ts(51,7)
Consider exporting 'bounceInY'.
Quite a bummer. Would be great if the lib could be fixed in that regard, since AOT will grow to standard i think. So this lib will be unusable that way very soon unfortunately.
PS: Working with Angular 5.1 and Angular-CLI 1.6.0
For anyone interested in helping there has been a suggestion about how to support AOT here. I don't currently have the time to work on it but I'll happily review any PR ❤️
does it work with angular 5 and aot?
No, it's not compatible with ng5 AOT or ng6 AOT either. Probably it will never be compatible to AOT in any version, unless the code gets rewritten from scratch :(
@pkelleter just tested the library with angular 5.2.0 and 6.0.0. It works with AOT build and without any errors.
nope.. thats depends from used trigger-function.
e.g. bounce works, flipper not.
There's an angular 6 and AoT compatible fork / rewrite of the lib over here: https://github.com/mygu/ngx-animate
@jiayihu @mygu I'd love to see you guys join efforts on this!
Hi guys, I may finally have some time the next days so I'll try to support again Angular 6+ and AOT. Thanks for your patience so far