bodymovin in Angular4, fixing appendChild of undefined

Question

I'm using the bodymovin script in my project. Even though some of my animated SVG's are rendering in the browser, I'm still getting this error

Uncaught TypeError: Cannot read property 'appendChild' of undefined
    at SVGRenderer.configAnimation (bodymovin.min.js:5)
    at AnimationItem.configAnimation (bodymovin.min.js:9)
    at XMLHttpRequest.r.onreadystatechange (bodymovin.min.js:9)
    at XMLHttpRequest.wrapFn [as __zone_symbol___onreadystatechange] (zone.js:1075)
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:424)
    at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask (zone.js:191)
    at ZoneTask.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:498)
    at invokeTask (zone.js:1370)
    at XMLHttpRequest.globalZoneAwareCallback (zone.js:1388)

According to this answer, I figure I should have the bodymovin script run after everything on the page has loaded. I've updated the code, taking into account the new suggestions

index.html

<!doctype html>
<html lang="en">
<head>...</head>
<body>...
<div class="full-app-body">
   <app-root></app-root>
  </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/4.10.2/bodymovin.min.js"></script>
</body>
</html>

app.component.ts

import { Component, ElementRef, OnInit, AfterViewInit } from '@angular/core';
import { Router, ActivatedRoute, RouterOutlet, Routes } from '@angular/router';
import { BrowserModule } from '@angular/platform-browser';
import { NgClass, CommonModule } from '@angular/common';
...

export class AppComponent implements AfterViewInit {
  constructor(public router: Router, private elementRef: ElementRef) {}
...
  ngAfterViewInit() {
    const s = document.createElement('script');
    s.type = 'text/javascript';
    s.src = '/assets/js/animations.js';
    // this.elementRef.nativeElement.appendChild(s);
    document.body.appendChild(s);
  }

app.component.html

<div id='bm'></div>

animations.js

var animation = bodymovin.loadAnimation({
  container: document.getElementById('bm'),
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: './assets/images/ani/fatigue-data.json'
});

@yurzui I tried implementing AfterViewInit, and switching the code into the `ngAfterViewInit` but I'm still getting the same undefined error... — bluebrooklynbrim, Aug 31 '17 at 11:37
@yurzui how would i go about troubleshooting that vendor file? I downloaded it exactly from [here](https://cdnjs.cloudflare.com/ajax/libs/bodymovin/4.10.2/bodymovin.min.js) — bluebrooklynbrim, Aug 31 '17 at 11:45
as far as i understand the issue is with the line this.elementRef.nativeElement.appendChild(s);.You are trying to append something to a unknown element.U should get reference to the element you are trying to attach the script to first.Where do you want s to be appended ? — Vikhyath Maiya, Aug 31 '17 at 12:03
@VikhyathMaiya Hmm... okay, that makes sense. How would I get a reference of the body, for example? I want to load in the script to the html body — bluebrooklynbrim, Aug 31 '17 at 13:41

Vikhyath Maiya · Answer 1 · 2017-08-31T14:04:12.257

1

as far as i understand the issue is with the line this.elementRef.nativeElement.appendChild(s);.You are trying to append something to a unknown element.U should get reference to the element you are trying to attach the script to first. Since its just a matter of adding a script,try the following code

 document.body.appendChild(s);

Hope this will help

update

Since you are using angular 4,you can use Renderer2 for solving your purpose as suggested here

edited Aug 31 '17 at 14:04

answered Aug 31 '17 at 13:53

Vikhyath Maiya

3,122
3
34
68

did it fix your issue ? – Vikhyath Maiya Aug 31 '17 at 18:31

bodymovin in Angular4, fixing appendChild of undefined

1 Answers1