Javascript 车身移动角度4，固定未定义的附件_Javascript_Angular_Svg_Bodymovin

Javascript 车身移动角度4，固定未定义的附件

javascript angular svg

Javascript 车身移动角度4，固定未定义的附件,javascript,angular,svg,bodymovin,Javascript,Angular,Svg,Bodymovin,我在项目中使用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 XMLHttpReque

我在项目中使用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脚本。考虑到新的建议，我已经更新了代码

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.html

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

据我所知，问题出在this.elementRef.nativeElement.appendChild的

行上。您正试图将某些内容附加到未知元素。您应该首先获取要将脚本附加到的元素的引用。由于这只是添加脚本的问题，请尝试以下代码
 document.body.appendChild(s);

希望这会有所帮助
更新
因为你使用的是角度4，您可以按照建议使用Render2来解决您的问题
id为bm
id的元素在哪里？更新了问题--div在app.component.htmlplease显示您正在初始化它的位置。elementref尝试使用ngAfterViewInit
钩子而不是ngOnInit
@yurzui尝试实现AfterViewInit，然后将代码切换到ngAfterViewInit，但我仍然得到相同的未定义错误…它解决了您的问题吗？
var animation = bodymovin.loadAnimation({
  container: document.getElementById('bm'),
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: './assets/images/ani/fatigue-data.json'
});

 document.body.appendChild(s);