Angular : ngx-echart 5.2.2 integration with Angular 9 ERR : NG8002: Can't bind to 'options' since it isn't a known property of 'div'

Issue

Good Day! I am trying to implement a line cart in Angular 9 using ngx-echarts 5.2.2 as it was the recommended version in npm. While running ng serve -o I am getting the error: NG8002: Can't bind to 'options' since it isn't a known property of 'div'. The code can be found over here Github repo

The HTML template for the transaction-fee-line-chart.component.ts is :

<div echarts [options]="_chartOption"></div>

The Component file : transaction-fee-line-chart.component.ts is:

import { Component, OnInit, OnDestroy} from '@angular/core';
import { EChartsOption } from 'echarts';
import { Subscription } from 'rxjs';
import { GetTransactionyChannelName_Req } from 'src/app/models/getTransactionByChannelName.model';
import { TransactionFeeDetail } from 'src/app/models/getTransactionByChannelName.model';
import { GetTransactionFeeByChannelNameService } from 'src/app/services/get-transaction-fee-by-channel-name.service';

@Component({
  selector: 'app-transaction-fee-line-chart',
  templateUrl: './transaction-fee-line-chart.component.html',
  styleUrls: ['./transaction-fee-line-chart.component.css']
})
export class TransactionFeeLineChartComponent implements OnInit {
  _chartOption : EChartsOption;
  subscription : Subscription;

  constructor(private service: GetTransactionFeeByChannelNameService) { }

  ngOnInit(): void {
    console.log("Preparing line chart");    
    let req_getTransactionFeeByChannelName = new GetTransactionyChannelName_Req();

    req_getTransactionFeeByChannelName.channelName = 'XYZ';
    req_getTransactionFeeByChannelName.fromDate = '01/01/2023';
    req_getTransactionFeeByChannelName.toDate = '31/05/2023';

    this.subscription=this.service.getTransactionFeeByChannelName(req_getTransactionFeeByChannelName)
      .subscribe((response) => {
        console.log(`API Resp : ${JSON.stringify(response)}`);        
        this._initChartTransactionFeeByChannelName(response.transactions);
      });
  }

  private _initChartTransactionFeeByChannelName(chartData : TransactionFeeDetail[]){
    this._chartOption={
      tooltip : {
        show : true,
      },
      background : 'transparent',
      xAxis: {
        type: 'category',
        data: chartData.map(m=>m.transactionType)
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: chartData.map(m=>m.totalFee),
          type: 'line'
        }
      ]
    };

  }
}

The Service code : get-transaction-fee-by-channel-name.service.ts calls an external API whose response is :

{
   "success": true,
   "transactions":    [
            {
         "transactionType": "Transaction-1",
         "totalFee": 322.1,
         "isFeetoCustomer": "Y"
      },
            {
         "transactionType": "Transaction-2",
         "totalFee": 18704.58,
         "isFeetoCustomer": "Y"
      },
            {
         "transactionType": "Transaction-3",
         "totalFee": 6234.860000000001,
         "isFeetoCustomer": "N"
      }
   ]
}

Attaching screenshot of the error for reference :

Angular and Node versions are :

Since the code is to be merged with a legacy project I cannot change the Angular version. Would appreciate any help in this regard.

Many thanks in advance!

Solution

Please add TransactionFeeLineChartComponent component to the imports array, that might be the root cause of your issue! When we use a component in routing, it has to be added to the declarations array of the module where the routing is defined!

As per the documentation we need to imports the module NgxEchartsModule differently!

@NgModule({
  declarations: [
    AppComponent,
    TransactionFeeLineChartComponent,     
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    NgxEchartsModule.forRoot({
      echarts: () => import('echarts')
    }),
  ],
  providers: [GetTransactionFeeByChannelNameService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answered By - Naren Murali