[SOLVED] I've got custom theme.js and dunno how to import it into angular app

[armando-ota]

I've got angular 15 app. Can anyone please tell me how or where to load theme.js file that registeres theme into echarts.

any help appreciated. Regards

Armando

[xieziyu]

just import your theme.js after echarts imported.

https://github.com/xieziyu/ngx-echarts/blob/6e3f06dfdada884c8a0572b610cd1155920df7c2/src/app/app.module.ts#L19

[armando-ota]

in app.module.ts i've got

imports: [
NgxEchartsModule.forRoot({
      /**
       * This will import all modules from echarts.
       * If you only need custom modules,
       * please refer to [Custom Build] section.
       */
      echarts: () => import('echarts'), // or import('./path-to-my-custom-echarts')
    }),
]

I've added to angular.json

"scripts": [
              "node_modules/echarts/dist/echarts.js",
              "src/assets/echarts/depoTheme.js"
            ]

and theme is loaded cause I've added console.log in theme JS file

using in directive attribute name theme="depo"

charts are not themed .. dunno what I'm doing wrong

[armando-ota]

ok I've managed to fix it by putting into app.module.ts: import * as echarts from 'echarts'; import '../assets/echarts/depoTheme.js';

and changed in imports to: NgxEchartsModule.forRoot({ echarts }),

I was hoping that lazy loading with themes was also a posibility.