ngx-lottie: AnimationLoader missing InjectionToken LottieOptions

I’m submitting a…


[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Other... Please describe:

Current behavior

Currently using LottieModule.forRoot in angular applications is throwing an error with InjectionToken

global-error-handler.ts:16 NullInjectorError: R3InjectorError(DialerModule)[AnimationLoader -> AnimationLoader -> AnimationLoader -> InjectionToken LottieOptions -> InjectionToken LottieOptions -> InjectionToken LottieOptions]: 
  NullInjectorError: No provider for InjectionToken LottieOptions!

Expected behavior

The animation shouldn’t be broken when the existing configuration is used.

Minimal reproduction of the problem with instructions

  • Step 1 - Setup the library by following the usage section https://github.com/ngx-lottie/ngx-lottie#usage
  • Step 2 - Import LottieModule into AppModule
  • Step 3 - While using ng-lottie on components animation is broken and is not disaplyed

What is the motivation / use case for changing the behavior?

Regression from https://github.com/ngx-lottie/ngx-lottie/pull/149/files#diff-19375bf16ff14c8eb4567903bc577358d927a82fd8a05ba33c45abb38b9cbb98

Environment


Libs:
- @angular/core version: 14.2.0
- ngx-lottie version: 9.1.0


Browser:
- [x] Chrome (desktop) version 107.0.5304.11
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: v16.18.0  
- Platform:  Mac 

Others:

About this issue

  • Original URL
  • State: closed
  • Created 2 years ago
  • Comments: 15 (7 by maintainers)

Most upvoted comments

I found this problem when using submodules (i.e. my router loads the modules when a page is visited). I only had 1 lottie animation in 1 submodule, hence my LottieModule.forRoot was there. I updated my Angular version (9 to 15) and the animation broke.

Moving the forRoot import to the main app.module.ts and keeping a plain LottieModule (i.e. with no forRoot) in my submodule, fixed my issue. (Not asking to reopen the issue, just writing this here for documentation and in case it can help others)

Most open source policies of GitHub projects (as Angular, React, etc.) are that issues reported without a reproduction are closed immediately and then reopened once a reproduction has been provided. Since I asked you multiple times to provide an example and you just pointed me to the #usage section you guys show disrespect by doing this. We give of our personal time to work on this project and would rather be spending our time fixing or enhancing the library than chasing down badly described or unreproducable issues.

Yes, make sense. But that shouldn’t be at the expense of not supporting existing implementations. Most of the components we have are not standalone yet. So we will have to stick with a module-based approach. Can you discuss this with your team and let me know?