Angular 16中创建ECharts动画柱状图遇绑定错误求助

问题情况 #

ECharts动画柱状图在Angular 16的在线示例中运行正常，但本地复现时出现以下错误：

Error: src/app/animated-echarts.component.ts:21:55 - error NG8002: Can't bind to 'autoResize' since it isn't a known property of 'div'.

21 '<div echarts (chartInit)="onChartInit($event)" [autoResize]="false" [options]="options">',
~~~~~~~~~~~~~~~~~~~~

Error: src/app/animated-echarts.component.ts:21:76 - error NG8002: Can't bind to 'options' since it isn't a known property of 'div'.

21 '<div echarts (chartInit)="onChartInit($event)" [autoResize]="false" [options]="options">',

本地项目复现步骤：

• 克隆仓库：git clone git@github.com:fireflysemantics/charts.git
• 进入项目目录：cd charts
• 安装依赖：npm i
• 启动项目：ng serve -o

解决方向 #

1. 确认ECharts Angular模块已正确导入
   本地项目大概率没在使用该组件的模块（比如AppModule）中导入NgxEchartsModule（或对应Angular ECharts封装库的模块）。只有导入后，Angular才能识别echarts指令以及autoResize、options这些属性绑定。

2. 修正模板编写方式
   错误代码里是在.ts文件中用字符串拼接模板，这种写法下Angular不会解析其中的指令和属性绑定。应该把<div echarts (chartInit)="onChartInit($event)" [autoResize]="false" [options]="options"></div>直接写到组件的.html模板文件中。

3. 对齐依赖版本
   对比在线示例和本地项目的package.json，确保ngx-echarts（或所用ECharts Angular库）、echarts以及Angular核心依赖的版本完全一致，版本不兼容会导致指令无法被识别。

4. 检查组件模块的声明与导出
   如果是自定义了ECharts相关组件，要确保该组件所在的模块已被导入到使用它的模块中，同时组件需在模块的declarations数组中声明，若跨模块使用还要添加到exports数组里。

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