Can't bind to 'options' since it isn't a known property of 'div' - Error after adding e-commerce to an existing project

[shopizer-ecommerce]

This is a question on an error i am getting after adding e-commerce domponents to an existing minimal theme of also version 9

Can't bind to 'options' since it isn't a known property of 'div'. (" <div echarts [ERROR ->][options]="options" class="echart" (chartInit)="onChartInit($event)">

[AhmadKNaji]

make sure the echarts are in your app module

[alexalloza]

same problem

[jyzbamboo]

Add NgxEchartsModule to your module.

[annymosse]

same to me I've import it already in my project and it worked fine, but when I import it in a library project it didn't work

// projects/library-project/src/lib/library-project.module.ts
...
import { NgxEchartsModule } from 'ngx-echarts';

@NgModule({
  declarations: [...],
  imports: [
    ....
    NgxEchartsModule.forRoot({
      echarts: () => import('echarts'),
    }),
  ],
  exports: [...],
})

[spaghettifunk]

I just bumped into this problem and probably I'm late to the party. However, In my case, I just solved the above issue by first importing the below code in app.module.ts

// app/app.module.ts
import { NgxEchartsModule } from 'ngx-echarts';

@NgModule({
  declarations: [...],
  imports: [
    ....
    NgxEchartsModule.forRoot({
      echarts: () => import('echarts'),
    }),
  ],
  exports: [...],
})

Then, since I'm calling the chart from a component declared in a "child-module" (called core.module.ts), I had to import it in the following way

// app/core/core.module.ts
import { NgxEchartsModule } from 'ngx-echarts';

@NgModule({
  declarations: [...],
  imports: [
    ....
    NgxEchartsModule.forChild(),
  ],
  exports: [...],
})

After that, the error went away and the chart appeared correctly. Hopefully, it will be helpful in the future 😄

[Kars1090]

You can also do this in your component, without needing to mess with the module.

import { NgxEchartsModule, NGX_ECHARTS_CONFIG } from 'ngx-echarts';

And then

@Component({
  ...
  providers: [
    {
      provide: NGX_ECHARTS_CONFIG,
      useFactory: () => ({ echarts: () => import('echarts') })
    },
  ],
})

[diegowrhasta]

Just throwing my 2 cents out here, if the answers don't really help you, check the library's and your project's angular version. I seriously have no idea why, my knowledge is limited, but after trying to follow-up the examples on the docs I kept getting this unknow property error. I was importing the Module just like it is told, but after hours, I managed to find a starter project someone had setup with Angular 15 (the same version I was using for my test project), and while reading every single line of every single file, it all came down to me aligning the angular version with the library's version, it had defaulted to the library's version 16 after the install command, said version is stated to be for Angular 16, so, I downgraded to a version 15, and after switching the numbers, it all just worked. Jeez.

[Kareman-M]

Same problem and I followed the instructions mentioned here https://xieziyu.github.io/ngx-echarts/#/welcome ,and tired all the ways in above comments but non of them work.

[MahmoudTarek44]

Im working on an old application Angular v12 and try to implement charts in it and doesn't work: 'NgxEchartsModule' does not appear to be an NgModule class.(-996002) always have this error importing the echartsModule in the app module or in the shared module where i use the charts component. i've tried all the above and didn't work. any help

[bill-3178]

Im working on an old application Angular v12 and try to implement charts in it and doesn't work: 'NgxEchartsModule' does not appear to be an NgModule class.(-996002) always have this error importing the echartsModule in the app module or in the shared module where i use the charts component. i've tried all the above and didn't work. any help

Which version of ngx-echarts have you specified ? V 7.1.0 ? (compatible with Angular 12)

[Sotatek-Henry]

You can also do this in your component, without needing to mess with the module.

import { NgxEchartsModule, NGX_ECHARTS_CONFIG } from 'ngx-echarts';

And then

@Component({
  ...
  providers: [
    {
      provide: NGX_ECHARTS_CONFIG,
      useFactory: () => ({ echarts: () => import('echarts') })
    },
  ],
})

Thanks for your suggestion, it's work for me in angular 17 + ngx-echart 17.1.0. I added NGX_ECHARTS_CONFIG in component directly.

[Monjoie11]

Angular 14. spent two days on this. here's how fixed it:

npm unistall echarts npm uninstall ngx-echarts

and then

npm install @swimlane/ngx-charts --save

swimlane's charts worked on the first try

[qiongSogeti]

if it is an old angular project, you need to add ToolTipModule to the module