NullInjectorError: No provider for InjectionToken NGX_ECHARTS_CONFIG

Question

我正在开发 angular 应用程序，当我打开我的项目时，出现如下错误

ERROR NullInjectorError: R3InjectorError(IndexModule)[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 (http://localhost:4200/vendor.js:71789:21)
    at R3Injector.get (http://localhost:4200/vendor.js:84254:29)
    at R3Injector.get (http://localhost:4200/vendor.js:84254:29)
    at R3Injector.get (http://localhost:4200/vendor.js:84254:29)
    at NgModuleRef.get (http://localhost:4200/vendor.js:100306:31)
    at R3Injector.get (http://localhost:4200/vendor.js:84254:29)
    at NgModuleRef.get (http://localhost:4200/vendor.js:100306:31)
    at Object.get (http://localhost:4200/vendor.js:97671:29)
    at getOrCreateInjectable (http://localhost:4200/vendor.js:75308:31)
    at Module.ɵɵdirectiveInject (http://localhost:4200/vendor.js:87509:10)

已尝试安装 ngx-echarts

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

仍然出现上述错误

Answer 1

在您的应用程序模块（或任何其他适当的 angular 模块）中导入 NgxEchartsModule：

使用动态导入

import { NgxEchartsModule } from 'ngx-echarts';

@NgModule({
  imports: [
    ...,
    NgxEchartsModule.forRoot({
      echarts: () => import('echarts')
    })
  ],
})
export class AppModule { }

或

您也可以直接传递 echarts，这会减慢初始渲染速度，因为它会将整个 echarts 加载到您的主包中。

import { NgxEchartsModule } from 'ngx-echarts';

import * as echarts from 'echarts';

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

NullInjectorError: No provider for InjectionToken NGX_ECHARTS_CONFIG

NullInjectorError: No provider for InjectionToken NGX_ECHARTS_CONFIG

charts

angular-chart

angular