[Bug] ECharts not integrating in Angular library used in Thingsboard widget

[Younes210701]

Version

5.5.1

Link to Minimal Reproduction

https://github.com/apache/echarts

Steps to Reproduce

Since I cannot do a setup to reproduce the issue, i will try to give you the detailed steps to reproduce this issue:

1. Create an Angular library :

• Generate a new Angular library using CLI.
• Install Echarts by running npm install echarts.

2. Integrate Echarts in the Angular Library :

• Create a new Angular component within the library.
• In my App.module.ts I added all the imports :

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

• Import Echarts and initialize it within the component. Below is a simplified version of the code used :

import { Component } from '@angular/core';
import { EChartsOption } from 'echarts';

@Component({
  selector: 'w4-echarts',
  templateUrl: './echarts.component.html',
  styleUrls: ['./echarts.component.scss']
})
export class EchartsComponent {
  chartOption: EChartsOption = {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
      },
    ],
    tooltip: {
      trigger: 'axis',
    },
  };
}

<div echarts [options]="chartOption" class="demo-chart"></div>

.demo-chart {
    height: 1400px;
  }

3. Build and export the Angular library (which I called Phoebus):

• Build the Angular library using Angular CLI.
• The build process generates a phoebus.js script.
  In the Thingsboard widget i added

4. Use the Angular library (Phoebus) in Thingsboard:

• Import the phoebus.js script as a resource in Thingsboard.
• Create a new Thingsboard widget and use the EchartComponent within the widget.

5. Run the Thingsboard project:

• Start Thingsboard.
• Navigate to the dashboard containing the widget with EchartComponent.
• In the console.log I have this error : Uncaught (in promise) Error: Error loading ./phoebus-index-d2b9972e.js

Current Behavior

• The chart does not get integrated well, and there is one error in the console : Uncaught (in promise) Error: Error loading ./phoebus-index-d2b9972e.js

Expected Behavior

The EChart should render correctly within the Thingsboard widget.

Environment

- OS:Linux Ubuntu 22.04.4 LTS
- Browser: Mozilla Firefox Browser 127.0.2
- Framework:Angular @15.2.10
- Echarts@5.5.1
- Ngx-Echarts@15.0.3

Any additional comments?

Description:

I am experiencing issues integrating ECharts in an Angular library (called Phoebus) that is used as a widget in Thingsboard. When attempting to render the charts, they do not get integrated correctly within the Thingsboard environment. Below are the details of my setup and the steps to reproduce the issue.

• I have verified that the chart container has the correct dimensions and that ECharts is being initialized.
• The same code works correctly when used directly in a standard Angular project without the library setup and Thingsboard.
• It seems that the issue arises when integrating the Angular library (Phoebus) into the Thingsboard environment.

Possible Causes:

• There may be conflicts between how Thingsboard handles Angular components and how ECharts expects to be rendered.

Steps Taken to Troubleshoot:

• Ensured all dependencies are correctly installed and up-to-date.
• Tried different initialization methods for ECharts.
• Verified that the chart container dimensions are correctly set.
• Attempted using different ECharts versions.

[Younes210701]

Any news ?

[cpavot]

Hello, any update please ?

This bug prevents us from integrating this library in our Angular library project... The only workaround is to use Apex Chart which is working...

Thanks.