title: bodymovin in Angular4, fixing appendChild of undefined
body: <p>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</p>
  
  <pre><code>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)
  </code></pre>
  
  <p>According to <a href="https://stackoverflow.com/questions/8670530/javascript-error-cannot-call-method-appendchild-of-null">this answer</a>, 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</p>
  
  <p>index.html</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;...&lt;/head&gt;
  &lt;body&gt;...
  &lt;div class="full-app-body"&gt;
     &lt;app-root&gt;&lt;/app-root&gt;
    &lt;/div&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/4.10.2/bodymovin.min.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>app.component.ts</p>
  
  <pre><code>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);
    }
  </code></pre>
  
  <p>app.component.html</p>
  
  <pre><code>&lt;div id='bm'&gt;&lt;/div&gt;
  </code></pre>
  
  <p>animations.js</p>
  
  <pre><code>var animation = bodymovin.loadAnimation({
    container: document.getElementById('bm'),
    renderer: 'svg',
    loop: true,
    autoplay: true,
    path: './assets/images/ani/fatigue-data.json'
  });
  </code></pre>