Angular 14.2.0安装并导入echarts时出错，求解决方案

问题描述 #

我通过以下npm命令安装ECharts相关依赖：

npm install echarts -S
npm install ngx-echarts -S
npm install @types/echarts -D

安装过程无异常，但在app.module.ts中导入NgxEchartsModule时出现错误。尝试降级echarts和ngx-echarts版本后问题仍未解决，我的app.module.ts代码如下：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NgHttpLoaderModule } from 'ng-http-loader';
import { CommonModule } from '@angular/common';
import { SharedModule } from './shared/shared.module';
import { NgxEchartsModule } from 'ngx-echarts';
@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    CommonModule,
    AppRoutingModule,
    SharedModule,
    NgxEchartsModule,
    NgHttpLoaderModule.forRoot(),
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

解决方案 #

• 核对Angular与ngx-echarts版本兼容性
  ngx-echarts不同版本对应不同Angular版本范围，比如最新版通常只支持Angular 14及以上版本。需确认安装的ngx-echarts版本与当前项目Angular版本匹配。

• 修正模块导入方式
  从ngx-echarts v6.0.0开始，必须调用forRoot()方法完成模块初始化，修改app.module.ts的导入配置：

  // 导入语句保持不变
  imports: [
    BrowserModule,
    CommonModule,
    AppRoutingModule,
    SharedModule,
    NgxEchartsModule.forRoot({
      echarts: () => import('echarts') // 按需加载ECharts核心库
    }),
    NgHttpLoaderModule.forRoot(),
  ]
  

• 清理缓存并重新安装依赖
  删除node_modules文件夹和package-lock.json文件，重新执行安装命令：

  rm -rf node_modules package-lock.json
  npm install
  

• 检查TypeScript版本适配性
  部分ngx-echarts版本对TypeScript版本有要求（如需4.0+），通过tsc -v查看当前版本，若不匹配则升级或降级TypeScript至符合要求的版本。

• 同步@types/echarts与echarts版本
  确保@types/echarts的版本与安装的echarts主版本一致，例如echarts为5.4.3时，执行：

  npm install @types/echarts@5.4.3 -D
  

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