angular 17 ngx-charts rendering blank in dynamically load component - Stack Overflow

admin管理员组

文章数量:1399959

Angular 17, Windows 10, Chrome

I am trying to design a customizable dashboard with widgets that would contain charts. My main app module is laid out with a primary form, then a dashboard component inside a mattab and then within that dashboard component I would load dynamically (using a config file fetched from an api) other modules and dashboard widget components from that dynamically loaded module.

All the dynamic stuff is working great, but no charts render. I see the div for the ngx-chart and it's assigned space in the screen but nothing is render, it's completely blank. There are no errors in the console. I then tried another charting library (ag-charts) but the same thing happens.

Then I experimented. I added a reference to ngx-charts in the main app-module and placed a test chart on the main dashboard wrapper page and that chart renders instantly, and after a delay (many seconds) the charts (both the ngx and the ag-charts) then rendered inside my dynamically created component from the dynamically loaded module. If I remove that 1st ngx-chart on the main dashboard wrapper, nothing renders anymore.

Am I missing some type of initialization by dynamically loading stuff?

What is that 1st root app module ngx-chart doing that is then allowing the dynamically loaded ones (including the other library ag-charts) to start rendering?

Why the delay? Sometimes it's just a second or too, but sometimes has been upto 10 seconds, and sometimes, it's still blank, but it's wierd, it seems tied to mouse movement. For example the 1st hardcoded static chart instantly renders and if the ones inside the dynamically loaded dashboard widget don't render but I then move my mouse, or I click off that browser to another app and then back again, then they finally render.

If I switch from dynamically loading the module with the dashboard widgets to having my main app module referencing it and then I only dynamically create the widget component, then the charts do always render in the widget immediately, but again, only if I keep that one hard-coded chart in the main dashboard component.

本文标签： angular 17 ngxcharts rendering blank in dynamically load componentStack Overflow