angular 8/9 + ivy problem

[mits87]

Hello,

I have problem with ng-apexcharts and angular 8 or 9 with ivy compiler. Let's say I have the template:

<apx-chart
  [chart]="data.options.chart"
  [labels]="data.options.labels"
  [legend]="data.options.legend"
  [dataLabels]="data.options.dataLabels"
  [series]="data.series"
></apx-chart>

and configuration:

  data = {
    options: {
      dataLabels: {
        enabled: false,
      },
      legend: {
        position: 'bottom',
      },
      labels: ['AirBnB', 'Booking', 'Booking'],
      chart: {
        height: '360',
        type: 'donut'
      },
    },
    series: [55, 35, 10]
  };

Everything is extremely easy. But when I use that with ivy compiler (doesn't matter 8 or 9 version of angular) then I got an error:

ERROR in src/app/panel/statistics/statistics.component.html:2:3 - error TS2322: Type '{ height: string; type: string; }' is not assignable to type 'ApexChart'.
  Types of property 'type' are incompatible.
    Type 'string' is not assignable to type 'ChartType'.

2   [chart]="data.options.chart"
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  src/app/panel/statistics/statistics.component.ts:6:16
    6   templateUrl: './statistics.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component StatisticsComponent.
src/app/panel/statistics/statistics.component.html:4:3 - error TS2322: Type '{ position: string; }' is not assignable to type 'ApexLegend'.
  Types of property 'position' are incompatible.
    Type 'string' is not assignable to type '"bottom" | "top" | "right" | "left"'.

4   [legend]="data.options.legend"
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  src/app/panel/statistics/statistics.component.ts:6:16
    6   templateUrl: './statistics.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component StatisticsComponent.

Can you help me with that?

[Carniatto]

I'm using with ivy for over 4 months no issues

[igorkemack]

After release of angular 9.0 problem is back. I'm trying to add NgApexchartsModule to my module imports and build prod fails. It throws:

Property left of ForInStatement expected node to be of a type ["VariableDeclaration","LVal"] but instead got null

ng version

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.900.5
@angular-devkit/build-angular      0.900.5
@angular-devkit/build-ng-packagr   0.900.5
@angular-devkit/build-optimizer    0.900.5
@angular-devkit/build-webpack      0.900.5
@angular-devkit/core               9.0.5
@angular-devkit/schematics         9.0.5
@angular/cdk                       9.1.1
@angular/http                      7.2.15
@angular/material                  9.1.1
@angular/material-moment-adapter   9.1.1
@ngtools/webpack                   9.0.5
@schematics/angular                9.0.5
@schematics/update                 0.900.5
ng-packagr                         9.0.3
rxjs                               6.5.4
typescript                         3.7.5
webpack                            4.41.2

apexcharts: 3.15.0 ng-apexcharts: 1.2.1

[junedchhipa]

@igorkemack This issue Property left of ForInStatement expected node to be of a type ["VariableDeclaration","LVal"] but instead got null was fixed recently. Please update apexcharts to v3.16.1 and it will get resolved automatically.

[rochapablo]

I'm also getting

Error: src/app/template.html:16:39 - error TS2322: Type '{ type: string; }' is not assignable to type 'ApexChart'.
  Types of property 'type' are incompatible.
    Type 'string' is not assignable to type 'ChartType'.

16 <apx-chart [series]="options.series" [chart]="options.chart" [title]="options.title"></apx-chart>

But, adding any seems to work.

public options: any = {
    title: {
      text: 'test'
    },
    chart: {
      type: 'bar'
    },
    series: [
      {
        name: 'sales',
        data: [30, 40, 35, 50, 49, 60, 70, 91, 125]
      }
    ],
    xaxis: {
      categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999]
    }
  };

"@angular": "~11.2.1",
"apexcharts": "^3.25.0",
"ng-apexcharts": "^1.5.8",