I have a Webapp using Angular 15 (due to the codebase being really old and we dont have the upgrade to angular 19 fully figured out). I am using the lottielab/lottie-player/web package to include an interactive lottie file. It works so far, but i have the problem that it throws console errors even though it works. My angular component looks as follows:
import { Component, ElementRef, Input, OnDestroy, OnInit, Renderer2 } from "@angular/core";
import Lottie from "@lottielab/lottie-player/web";
import { Observable, Subscription } from "rxjs";
@Component({
selector: "interactive-lottie",
templateUrl: "./interactive-lottieponent.html",
styleUrls: ["./interactive-lottieponent.css"],
})
export class InteractiveLottieComponent implements OnInit, OnDestroy {
private eventsSubscription: Subscription;
@Input() events: Observable<string>;
@Input("name") name: string;
constructor(private renderer: Renderer2, private el: ElementRef) {}
ngOnInit() {
if (this.name) {
const lottie = new Lottie();
this.eventsSubscription = this.events.subscribe((triggerName: string) => {
lottie.interactivity.trigger(triggerName)
});
if(lottie){
lottie.setAttribute(
"src",
`assets/microinteractions/interactive/${this.name}.json`
);
lottie.setAttribute("autoplay", "true");
const target = this.el.nativeElement;
this.renderer.appendChild(target, lottie);
target.querySelector("lottie-player").shadowRoot.querySelector("style").remove()
}
}
}
ngOnDestroy() {
this.eventsSubscription.unsubscribe();
}
}
the component is implemented as follows:
<interactive-lottie name="bookSearchWhite" [events]="eventsSubject.asObservable()"></interactive-lottie>
But i am getting the error
interactive-lottieponent.ts:26: ERROR Error: Uncaught (in promise):
TypeError: Cannot set properties of null (setting 'textContent')
TypeError: Cannot set properties of null (setting 'textContent')
I also tried putting the init code inside ngAfterViewInit but that also did not seem to work. Any ideas what i'm doing wrong here? As previously mentioned, the component works as expected and therefor i do not understand where the errors are coming from. This is also the only implementation of the Component so this is the only source that the error could originate from.