将 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

？

这是 Stackblitz 演示

Answer 1

文档表明在这种情况下应提供

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

s。