javascript - 将 Angular ECharts 导入 Stackblitz 15.1 项目？

Question

Stackblitz 现在对 Angular 项目使用独立配置，当我尝试初始化 Angular ECharts (ngx-echarts) 的模块时它会产生以下错误:

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

这就是 ngx-echarts 模块的初始化方式:

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

在 Stackblitz 上之前的 Angular 非独立版本中，这工作得很好。

我们如何在 Stackblitz Angular 15.1 项目中的模块上调用 forRoot ？

Here's a Stackblitz Demo

Answer 1

documentation指示在这种情况下应提供 InjectionToken。没有提供者的模块是单独导入的，并且提供的配置如下:

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') }),
    },
  ]
})

此方法也适用于 NgModule。