Line chart colors are not rendering when the chart is inside a module other than the app module

[pachabelle]

In the .ts file, my colors are defined as:

public chartColors: Color[] = [
{ // blueberry
backgroundColor: '#cdd9e6',
borderColor: '#064180',
pointBackgroundColor: '#064180',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: '#cdd9e6'
},
...
]

In the .html file:
<canvas baseChart width="800" height="400"
[datasets]="lineChartData"
[labels]="lineChartLabels"
[colors]="chartColors"
[legend]="false"
chartType="line">

Using the exact same code in the main application module the colors are rendering fine, however, when inside a module that is lazy loaded, the colors are not rendering - the line chart chart colors are all grey. Is there an extra step that I am missing to get this to work correctly in a module other than the app module?

[GitHubish]

I have the same problem in the polarChart, everything is grey. Has anyone found a solution? By adding an *ngIf it works sometimes but never when the page first loads by doing F5

[0x4a61636f62]

I am experiencing a similar issue with nested components where my chart will not appear when NgModule is imported into the app module. Only if I import it into the same module as the component will it appear.

[santam85]

Chart.js does not behave consistently if rendering to an invisible canvas. Be sure to call refresh or using responsive: true when navigating to lazy loaded routes. Good information about this should be added to the docs.