Angular 9集成ngx-echarts 5.2.2触发NG8002错误求助

错误信息 #

运行ng serve -o时触发错误：

NG8002: Can't bind to 'options' since it isn't a known property of 'div'

相关代码 #

组件模板（transaction-fee-line-chart.component.html） #

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

组件文件（transaction-fee-line-chart.component.ts） #

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'
        }
      ]
    };

  }
}

API响应示例 #

{
   "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"
      }
   ]
}

环境版本 #

• Angular 9.x
• Node.js 14.x

解决方案 #

该错误核心原因是ngx-echarts的指令未被正确导入到模块中，Angular无法识别echarts指令与[options]绑定属性。针对Angular 9 + ngx-echarts 5.2.2，按以下步骤修复：

1. 匹配依赖版本
   确保安装对应兼容版本的依赖：

   npm install ngx-echarts@5.2.2 echarts@4.x --save
   

   注意：ngx-echarts 5.x仅兼容echarts 4.x，不可安装echarts 5+版本。

2. 导入NgxEchartsModule到对应模块
   打开组件所属的模块文件（如app.module.ts或FeatureModule），添加导入配置：

   import { NgxEchartsModule } from 'ngx-echarts';
   
   @NgModule({
     imports: [
       // 其他已导入模块
       NgxEchartsModule.forRoot({
         echarts: () => import('echarts') // 按需加载echarts核心库
       })
     ]
   })
   export class AppModule { }
   

   若为FeatureModule，无需forRoot()，直接导入：

   import { NgxEchartsModule } from 'ngx-echarts';
   
   @NgModule({
     imports: [
       // 其他已导入模块
       NgxEchartsModule
     ]
   })
   export class YourFeatureModule { }
   

3. 验证模板与组件变量
   确认模板中echarts指令拼写正确，[options]绑定的_chartOption变量已在组件中定义并在API响应后完成赋值（当前代码逻辑已满足）。

4. 检查AOT编译配置（可选）
   若项目使用AOT编译，确保tsconfig.json的compilerOptions未禁用装饰器相关配置，ngx-echarts依赖Angular装饰器注册指令。

优化建议（可选） #

若需减少打包体积，可按需导入echarts模块：

NgxEchartsModule.forRoot({
  echarts: () => import('echarts/lib/echarts').then(m => {
    import('echarts/lib/chart/line'); // 导入折线图模块
    import('echarts/lib/component/tooltip'); // 导入提示框组件
    return m;
  })
})

内容的提问来源于stack exchange，提问作者default_settings