Thanks to visit codestin.com
Credit goes to github.com

Skip to content

animations missing in production #61150

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
igokul1973 opened this issue May 6, 2025 · 4 comments
Open

animations missing in production #61150

igokul1973 opened this issue May 6, 2025 · 4 comments
Labels
area: compiler Issues related to `ngc`, Angular's template compiler needs reproduction This issue needs a reproduction in order for the team to investigate further
Milestone

Comments

@igokul1973
Copy link

igokul1973 commented May 6, 2025

Which @angular/* package(s) are the source of the bug?

Don't known / other

Is this a regression?

Yes

Description

The gist:
When in dev environment (ng serve or ng build --configuration=development) the animations (@Keyframes) work fine. When the project is built in production mode, some animations are missing.
How to reproduce:
Clone and run in different configurations igokul1973/blog.didgibot.com@e478057. You will see the header animation in both cases but in production mode the subheader line 'blog about making the blog' will be hidden because the animation responsible for changing opacity to 1 is missing.
What I tried:
Changing optimization to 'false' in production mode helps, changing to encapsulation: ViewEncapsulation.None works too, but both are suboptimal and should not be used.
Similar issues:
I read the closed issue - #53038 - and it is very similar as far as the issue description is concerned. In my case, however, while experimenting I even moved all @Keyframes styling to the same component stylesheet (which is recommended on the issue 53038 but in my case adds to redundancy and is also suboptimal), but it did not help.
Another similar issue - #60878.
Environment:
I use Angular 19, Angular Material 19, etc. Please let me know if you have any questions.
For now I will resort to setting encapsulation to None.

Please provide a link to a minimal reproduction of the bug

igokul1973/blog.didgibot.com@e478057

Please provide the exception or error you saw

No errors

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 19.2.10
Node: 22.4.1
Package Manager: yarn 1.22.22
OS: darwin arm64

Angular: 19.2.9
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1902.10
@angular-devkit/build-angular   19.2.10
@angular-devkit/core            19.2.10
@angular-devkit/schematics      19.2.10
@angular/cdk                    19.2.14
@angular/cli                    19.2.10
@angular/material               19.2.14
@schematics/angular             19.2.10
rxjs                            7.8.2
typescript                      5.8.3
zone.js                         0.15.0

Anything else?

Image Image
igokul1973 pushed a commit to igokul1973/blog.didgibot.com that referenced this issue May 6, 2025
@thePunderWoman thePunderWoman added the area: compiler Issues related to `ngc`, Angular's template compiler label May 7, 2025
@ngbot ngbot bot added this to the needsTriage milestone May 7, 2025
@JeanMeche
Copy link
Member

JeanMeche commented May 7, 2025

Can you please provide a minimal-repro of the issue. We don't investigate larger applications. Thank you.

@JeanMeche JeanMeche added the needs reproduction This issue needs a reproduction in order for the team to investigate further label May 7, 2025
@ngbot ngbot bot modified the milestones: needsTriage, Backlog May 7, 2025
@igokul1973
Copy link
Author

The app is small, just a few components, all you need to do is git clone... && cd ... && yarn && yarn start (in whatever mode).
Also, what are the exact instructions for the "minimal reproduction"? Is it a repo (which I provided) or deployed app (somewhere on StackBlitz)?
In my case one has to start the app in different modes in order to see the buggy result, so I don't know how to do it in StackBlitz (and, honestly, don't even want to know).
Also, if I start removing the non-related components to make it a "minimal-repro" (there are just a couple of them), I may break the scenario where the bug occurs (I already spent couple of hours to investigate and put it all together to open an issue) and it is really not worth the effort. Besides, my app cannot live without them.
So please do the needful in order to investigate whatever is broken here. I am not the only one with similar issue.

@e-oz
Copy link

e-oz commented May 8, 2025

To both sides of this conversation:
1.
Image
2.
Image
3. Ta-da!

To run ng serve in prod mode, use ng serve --configuration=production.

@JeanMeche
Copy link
Member

JeanMeche commented May 8, 2025

Actually there is a shortlink for any github repo: https://stackblitz.com/github/igokul1973/blog.didgibot.com

And to answer the question, both are find for that reason, it easy for use to open a github repo.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area: compiler Issues related to `ngc`, Angular's template compiler needs reproduction This issue needs a reproduction in order for the team to investigate further
Projects
None yet
Development

No branches or pull requests

4 participants