Importing Angular ECharts Into a Stackblitz 15.1 project?

Question

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

Answer 1

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.