bodymovin в Angular4, исправление appendChild неопределенного

Я использую скрипт bodymovin в своем проекте. Несмотря на то, что некоторые из моих анимированных SVG отображаются в браузере, я все равно получаю эту ошибку.

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)

Согласно этому ответу, я полагаю, что у меня должен быть bodymovin script запускается после того, как все на странице загрузится. Я обновил код с учетом новых предложений

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>

анимация.js

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

javascript svg angular bodymovin
person bluebrooklynbrim    schedule 31.08.2017    source источник
comment
Где элемент с bm id?   -  person yurzui    schedule 31.08.2017
comment
обновил вопрос - div находится в app.component.html   -  person bluebrooklynbrim    schedule 31.08.2017
comment
пожалуйста, покажите, где вы инициализируете this.elementRef   -  person Vikhyath Maiya    schedule 31.08.2017
comment
Попробуйте использовать хук ngAfterViewInit вместо ngOnInit   -  person yurzui    schedule 31.08.2017
comment
@yurzui Я пытался внедрить AfterViewInit и переключить код на ngAfterViewInit, но все равно получаю ту же ошибку undefined...   -  person bluebrooklynbrim    schedule 31.08.2017
comment
Установите точку останова и проверьте, что не определено   -  person yurzui    schedule 31.08.2017
comment
@VikhyathMaiya Я добавил строку с конструктором   -  person bluebrooklynbrim    schedule 31.08.2017
comment
Ваша ошибка исходит от bodymoving.min.js   -  person yurzui    schedule 31.08.2017
comment
@yurzui, как мне устранить неполадки с этим файлом поставщика? Я скачал его именно с здесь   -  person bluebrooklynbrim    schedule 31.08.2017
comment
насколько я понимаю, проблема связана со строкой this.elementRef.nativeElement.appendChild(s);. Вы пытаетесь добавить что-то к неизвестному элементу. Вы должны сначала получить ссылку на элемент, к которому вы пытаетесь прикрепить скрипт .Куда вы хотите добавить s?   -  person Vikhyath Maiya    schedule 31.08.2017
comment
@VikhyathMaiya Хм... ладно, в этом есть смысл. Как я могу получить ссылку на тело, например? Я хочу загрузить скрипт в тело html   -  person bluebrooklynbrim    schedule 31.08.2017

Ответы (1)


arrow_upward
1
arrow_downward

насколько я понимаю, проблема связана со строкой this.elementRef.nativeElement.appendChild(s);. Вы пытаетесь добавить что-то к неизвестному элементу. Вы должны сначала получить ссылку на элемент, к которому вы пытаетесь прикрепить скрипт. Поскольку это всего лишь вопрос добавления скрипта, попробуйте следующий код

 document.body.appendChild(s);

Надеюсь, это поможет

обновить

Поскольку вы используете angular 4, вы можете использовать Renderer2 для решения своей задачи, как было предложено здесь

person Vikhyath Maiya    schedule 31.08.2017
comment
это решило вашу проблему? - person Vikhyath Maiya; 31.08.2017