javascriptangularechartsstackblitzngx-echarts

Importing Angular ECharts Into a Stackblitz 15.1 project?


Stackblitz is now using a standalone configuration for Angular Projects and when I attempt to initialize the module for Angular ECharts (ngx-echarts) it produces the following error:

Error in src/main.ts (18:5)
Type 'ModuleWithProviders<NgxEchartsModule>' is not assignable to type 'readonly any[] | Type<any>'.

This is how the ngx-echarts module is initialized:

  imports: [
    CommonModule,
    NgxEchartsModule.forRoot({
      echarts: () => import('echarts'),
    }),
  ],

In the previous non standalone versions of Angular on Stackblitz this worked fine.

How do we call forRoot on modules in Stackblitz Angular 15.1 projects?

Here's a Stackblitz Demo


Solution

  • The documentation indicates an InjectionToken should be provided in this case instead. The module without providers is imported separately and the config provided like so:

    import { NgxEchartsModule, NGX_ECHARTS_CONFIG } from 'ngx-echarts';
    
    @Component({
      standalone: true,
      selector: 'my-chart',
      template: `
        <div echarts [options]="chartOptions" class="demo-chart"></div>
      `,
      imports: [NgxEchartsModule],
      providers: [
        {
          provide: NGX_ECHARTS_CONFIG,
          useFactory: () => ({ echarts: () => import('echarts') }),
        },
      ]
    })
    

    This method also works in NgModules.