Ngx-charts: [AOT] Gauge-axis

[j3ddesign]

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here

Current behavior
When compiling for AOT while using the gauge chart, the following errors are thrown

ERROR in [at-loader] src\compiled\node_modules\@swimlane\ngx-charts\release\gauge\gauge-axis.component.ngfactory.ts:131:7
    TS2346: Supplied parameters do not match any signature of call target.

ERROR in [at-loader] src\compiled\node_modules\@swimlane\ngx-charts\release\gauge\gauge-axis.component.ngfactory.ts:251:50
    TS2339: Property 'big' does not exist on type 'any[]'.

ERROR in [at-loader] src\compiled\node_modules\@swimlane\ngx-charts\release\gauge\gauge-axis.component.ngfactory.ts:254:50
    TS2339: Property 'big' does not exist on type 'any[]'.

ERROR in [at-loader] src\compiled\node_modules\@swimlane\ngx-charts\release\gauge\gauge-axis.component.ngfactory.ts:257:50
    TS2339: Property 'small' does not exist on type 'any[]'.

Expected behavior
Compile without errors

Reproduction of the problem

What is the motivation / use case for changing the behavior?

Please tell us about your environment:

• ngx-charts version: 4.3.0
  

• Angular version: 2.4.1
  

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
  

• Language: [all | TypeScript X.X | ES6/7 | ES5]

[Opticsponge]

if you try and run aot=yes in angular 4.0 you get a bunch more errors

ERROR in ng:///node_modules/@swimlane/ngx-charts/release/pie-chart/pie-label.component.d.ts.PieLabelComponent.html (7,7): Supplied parameters do not match any signature of call target.

ERROR in ng:///node_modules/@swimlane/ngx-charts/release/bar-chart/bar-horizontal-2d.component.d.ts.BarHorizontal2DComponent.html (8,7): Supplied parameters do not match any signature of call target.
ng:///node_modules/@swimlane/ngx-charts/release/bar-chart/bar-horizontal-2d.component.d.ts.BarHorizontal2DComponent.html (9,7): Supplied parameters do not match any signature of call target.

ERROR in ng:///node_modules/@swimlane/ngx-charts/release/bar-chart/bar-horizontal-normalized.component.d.ts.BarHorizontalNormalizedComponent.html (8,7): Supplied parameters do not match any signature of call target.
ng:///node_modules/@swimlane/ngx-charts/release/bar-chart/bar-horizontal-normalized.component.d.ts.BarHorizontalNormalizedComponent.html (9,7): Supplied parameters do not match any signature of call target.

ERROR in ng:///node_modules/@swimlane/ngx-charts/release/bar-chart/bar-horizontal-stacked.component.d.ts.BarHorizontalStackedComponent.html (8,7): Supplied parameters do not match any signature of call target.
ng:///node_modules/@swimlane/ngx-charts/release/bar-chart/bar-horizontal-stacked.component.d.ts.BarHorizontalStackedComponent.html (9,7): Supplied parameters do not match any signature of call target.

ERROR in ng:///node_modules/@swimlane/ngx-charts/release/bar-chart/bar-vertical-2d.component.d.ts.BarVertical2DComponent.html (8,7): Supplied parameters do not match any signature of call target.
ng:///node_modules/@swimlane/ngx-charts/release/bar-chart/bar-vertical-2d.component.d.ts.BarVertical2DComponent.html (9,7): Supplied parameters do not match any signature of call target.

ERROR in ng:///node_modules/@swimlane/ngx-charts/release/bar-chart/bar-vertical-normalized.component.d.ts.BarVerticalNormalizedComponent.html (8,7): Supplied parameters do not match any signature of call target.
ng:///node_modules/@swimlane/ngx-charts/release/bar-chart/bar-vertical-normalized.component.d.ts.BarVerticalNormalizedComponent.html (9,7): Supplied parameters do not match any signature of call target.

ERROR in ng:///node_modules/@swimlane/ngx-charts/release/bar-chart/bar-vertical-stacked.component.d.ts.BarVerticalStackedComponent.html (8,7): Supplied parameters do not match any signature of call target.
ng:///node_modules/@swimlane/ngx-charts/release/bar-chart/bar-vertical-stacked.component.d.ts.BarVerticalStackedComponent.html (9,7): Supplied parameters do not match any signature of call target.

ERROR in /src/$$_gendir/node_modules/@swimlane/ngx-charts/release/bubble-chart/bubble-chart.component.ngfactory.ts (1,1): Property 'clipPathId' does not exist on type 'BubbleChartComponent'.

ERROR in ng:///node_modules/@swimlane/ngx-charts/release/heat-map/heat-map.component.d.ts.HeatMapComponent.html (7,7): Property 'onActivate' does not exist on type 'HeatMapComponent'.
ng:///node_modules/@swimlane/ngx-charts/release/heat-map/heat-map.component.d.ts.HeatMapComponent.html (8,7): Property 'onDeactivate' does not exist on type 'HeatMapComponent'.

ERROR in ng:///node_modules/@swimlane/ngx-charts/release/pie-chart/advanced-pie-chart.component.d.ts.AdvancedPieChartComponent.html (21,15): Property 'labels' does not exist on type 'AdvancedPieChartComponent'.

ERROR in /src/$$_gendir/node_modules/@swimlane/ngx-charts/release/gauge/gauge-axis.component.ngfactory.ts (1,1): Property 'big' does not exist on type 'any[]'.
ng:///node_modules/@swimlane/ngx-charts/release/gauge/gauge-axis.component.d.ts.GaugeAxisComponent.html (4,9): Property 'big' does not exist on type 'any[]'.
ng:///node_modules/@swimlane/ngx-charts/release/gauge/gauge-axis.component.d.ts.GaugeAxisComponent.html (8,9): Property 'small' does not exist on type 'any[]'. 

[marjan-georgiev]

Is this still occurring for you with ngx-charts 5.2.x?

[j3ddesign]

Hi, sorry for the late response here, we started using highcharts as a temporary fix while working on other features and have now come back to attempt ngx charts again.
I don't have the errors mentioned in the initial post anymore, however I do get
No providers for InjectionService when using the linear gauge (the only chart I've tested with, so far)

This is running in a lazy loaded module, and I'm essentially matching the installation here

[marjan-georgiev]

You will need to do this in your component where you use the chart:

```
import { ViewContainerRef } from '@angular/core';
import { TooltipService } from '@swimlane/ngx-charts';

...

constructor(
private viewContainerRef: ViewContainerRef,
private chartTooltipService: TooltipService
) {
chartTooltipService.injectionService.setRootViewContainer(viewContainerRef);
}

[j3ddesign]

Oh thanks, I found adding NgxChartsModule to my root app module worked too - I'll attempt the method above. Thanks!

Edit: Despite having TooltipService in my providers, I was getting No provider for TooltipService errors.
For now I've reverted to using the NgxModule imported into app module. I'll worry about the lazy load portion later ;)
Will close now as my original issue is resolved.

[cpower1994]

@marjan-georgiev I've tried your solution I'm still getting

StaticInjectorError(AppModule)[TooltipService -> InjectionService]:
StaticInjectorError(Platform: core)[TooltipService -> InjectionService]:
NullInjectorError: No provider for InjectionService!