question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

No AOT-compatible way to reuse animation definitions

See original GitHub issue

I’m submitting a … (check one with “x”)

[ ] bug report => search github for a similar issue or PR before submitting
[x] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior As far as I can tell there is currently no way to reuse Angular animations in a way that is compatible with the AOT compiler. When using JIT, I could export some static AnimationEntryMetadata objects and then reference these in my component decorators, e.g. animations: [Animations.EXPAND_WIDTH].

This doesn’t work in AOT - animations’ state metadata will not be generated correctly. I don’t want to redeclare the animation in full in every component decorator as they can be 5-15 lines each and are all the same across my app.

Expected behavior AOT compiler should allow for the reuse of animation metadata.

Minimal reproduction of the problem with instructions Create an AOT project, create some static animation definitions and export them from one file. Import them into a component definition and reference one of the animations in the compiler’s metadata. AOT compilation will fail.

What is the motivation / use case for changing the behavior? DRY principles, maintainability, desire to make reusable animation libraries

Please tell us about your environment: Windows 7, WebStorm

  • Angular version: 2.2.0

  • Browser: all

  • Language: all

  • Node (for AoT issues): node --version = 5.8.0

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Reactions:5
  • Comments:11 (9 by maintainers)

github_iconTop GitHub Comments

1reaction
chuckjazcommented, Nov 29, 2016

I created an issue for the error message, #13132, and am closing this issue in favor of that one.

0reactions
angular-automatic-lock-bot[bot]commented, Sep 13, 2019

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Reusable animations
To create a reusable animation, use the animation() function to define an animation in a separate .ts file and declare this animation definition...
Read more >
Use and Reuse Everything in SVG… Even Animations!
This article will be about learning how to build and optimize your code with <use> element, CSS Variables and CSS animations.
Read more >
Duplicate animations with the animation painter
In PowerPoint, you can copy animations from one object to another by using the Animation Painter. Animation Painter applies animation effects and ...
Read more >
Create and duplicate symbols in Animate
Use movie clip symbols to create reusable pieces of animation. ... If the class definitions are not found in these locations, Animate ...
Read more >
Property Animation Overview
You can define an animation to change any object property over time, regardless of whether it draws to the screen or not.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found