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?
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 NgModule
s.