angular整合ngx-echarts运行时报错 NullInjectorError: No provider for InjectionToken NGX_ECHARTS_CONFIG!

1 问题描述

今天在使用angular整合echarts做图标展示的时候，编译没有问题，但是运行时遇到了以下错误：

core.js:6210 ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(DragEchartsModule)[InjectionToken NGX_ECHARTS_CONFIG -> InjectionToken NGX_ECHARTS_CONFIG -> InjectionToken NGX_ECHARTS_CONFIG -> InjectionToken NGX_ECHARTS_CONFIG]: 
  NullInjectorError: No provider for InjectionToken NGX_ECHARTS_CONFIG!
NullInjectorError: R3InjectorError(DragEchartsModule)[InjectionToken NGX_ECHARTS_CONFIG -> InjectionToken NGX_ECHARTS_CONFIG -> InjectionToken NGX_ECHARTS_CONFIG -> InjectionToken NGX_ECHARTS_CONFIG]: 
  NullInjectorError: No provider for InjectionToken NGX_ECHARTS_CONFIG!
    at NullInjector.get (core.js:11102)
    at R3Injector.get (core.js:11269)
    at R3Injector.get (core.js:11269)
    at R3Injector.get (core.js:11269)
    at NgModuleRef$1.get (core.js:25299)
    at R3Injector.get (core.js:11269)
    at NgModuleRef$1.get (core.js:25299)
    at Object.get (core.js:25013)
    at lookupTokenUsingModuleInjector (core.js:3389)
    at getOrCreateInjectable (core.js:3501)
    at resolvePromise (zone-evergreen.js:1213)
    at resolvePromise (zone-evergreen.js:1167)
    at zone-evergreen.js:1279
    at ZoneDelegate.invokeTask (zone-evergreen.js:406)
    at Object.onInvokeTask (core.js:28540)
    at ZoneDelegate.invokeTask (zone-evergreen.js:405)
    at Zone.runTask (zone-evergreen.js:178)
    at drainMicroTaskQueue (zone-evergreen.js:582)

安装命令如下:

npm install echarts -S
npm install ngx-echarts -S

package.json中依赖版本如下(只列出了echarts使用的包):

  "dependencies": {
    "echarts": "^5.1.0",
    "ngx-echarts": "^6.0.1",
  },

使用时候默认在 xxx.module.ts 文件中NgxEchartsModule依赖导入是这样的：

import {NgxEchartsModule} from 'ngx-echarts';

@NgModule({
  imports: [
	......
    NgxEchartsModule,
  ],
  	......
})

2 解决方法

修改 xxx.module.ts 文件中NgxEchartsModule依赖导入即可解决

import * as echarts from 'echarts';
import {NgxEchartsModule} from 'ngx-echarts';

@NgModule({
  imports: [
	......
    NgxEchartsModule.forRoot({
      echarts,
    })
  ],
  	......
})