ng build issue when using ngx-echarts in a custom library

[gpanganiban-extreme]

I have custom component library that is using ngx-echarts. When I build the library (ng build --project my-library), I get error like this:

`

• Compiling with Angular sources in Ivy partial compilation mode. src/lib/widgets/charts/chart-base/chart-base.component.html:3:5 - error NG8002: Can't bind to 'options' since it isn't a known property of 'div'.

3 [options]="chartOptions"

  src/lib/widgets/charts/chart-base/chart-base.component.ts:22:16
    22   templateUrl: './chart-base.component.html',

Error occurs in the template of component ChartBaseComponent.

`

Here is the component .ts and .html file:

import { Component, Input, NgModule, OnInit, ViewChild, ViewRef } from '@angular/core';
import { CommonModule } from '@angular/common';
import { EChartsOption } from 'echarts';
import { NgxEchartsModule } from 'ngx-echarts';

import { ChartDataSourceService  } from '../chart-data-source.service';
import { ChartDataPoint, ChartDataExtractionMap } from '../chart-data-models.type';
import { MatFormFieldModule } from '@angular/material/form-field';

/**
 * @class
 * @summary Base class for all Chart-centric widgets
 * @desc A new subclass of this should be created for each chart-type that we want to support
 */
@Component({
  selector: 'chart-base',
  templateUrl: './chart-base.component.html',
  styleUrls: ['./chart-base.component.scss']
})
export class ChartBaseComponent<S extends ChartDataSourceService> implements OnInit {

  /**
   * The options object that is used to initialize the eChart
   */
  @Input() chartOptions: EChartsOption;

  /**
   * The Data Source that will provide the data for the chart
   */
  @Input() chartDataSource: S;

  /**
   * A reference to the chart container node
   */
  @ViewChild('chartContainer') chartContainer: ViewRef;

  /**
   * Additional chartOptions that will be mixed into the final chartOptions
   */
  @Input() additionalApiParams: any = {};

  /**
   * Maps fields in the response to chart data point values.
   * @todo Document how this works
   */
  @Input() transformMaps: ChartDataExtractionMap[] = [];

  /**
   *  See https://echarts.apache.org/en/api.html#echartsInstance.setOption for details
   */
  protected _setOptionOpts?: {
    notMerge?: boolean;
    replaceMerge?: string[];
    lazyUpdate?: boolean;
    silent?: boolean;
  }

  /**
   * The eCharts instance object.
   * @desc Use this if you need to access the chart instance directly.
   */
  _chartInstance: any;

  /**
   * Angular component life-cycle method
   */
  ngOnInit(): void {
    // Empty in base class
  }

  /**
   * Called when chart is initialized.
   * @param echartInstance
   */
  onChartInit(echartInstance) {
    this._chartInstance = echartInstance;
    this.loadAndRender();
  }

  /**
   * Loads the data from the datasource and renders the chart
   * @desc Calls the ChartDataSource's loadSeriesData, using the response to build the
   *        data-related portions on the eCharts options.
   * @param apiParams - parmas passed to the GET API call.
   */
  loadAndRender(apiParams: object = {}) {
    this.chartDataSource.loadSeriesData(null, {...apiParams, ...this.additionalApiParams}).subscribe( (seriesData) => {
      var dataOptions = this.createDataOptions(seriesData);
      this._chartInstance.setOption(dataOptions, this._setOptionOpts);

      if(this.chartDataSource.apiResponsePromise) {
        this.chartDataSource.apiResponsePromise.then( response => this.onApiResponse(response) )
      }
    });

  }

  /**
   * An event handler that provides the raw API response data. Subclass can override
   * @param apiResponse The raw API response as a JSON object
   */
  public onApiResponse(apiResponse) {

  }

  /**
   * Creates 'data' section(s) of the chartOptions object.
   * @desc Subclasses implementation should create the EChartsOptions object for the desired chart.
   *        This obbect will be passed to echart.setOptions() method, causing the chart to be rendered with the
   *        specified data
   * @param seriesData
   * @returns chart options that should include the desired 'data' values for 'series' or an eCharts 'dataSet' object
   */
  public createDataOptions(seriesData: ChartDataPoint[]): EChartsOption {
    throw "Must implement in subclass";
  }

}
@NgModule({
  imports: [
    CommonModule,
    NgxEchartsModule.forRoot({
      echarts: () => import('echarts'),
    })
  ]
})
export class ChartBaseModule { }

And the .html file:

<div class="chart-wrapper">
  <div echarts
    [options]="chartOptions"
    (chartInit)="onChartInit($event)"
  ></div>
</div>

[Gennad-r]

I have the same error. Angular 15.2.9. Standalone component.

Can't bind to 'initOpts' since it isn't a known property of 'div'. Can't bind to 'options' since it isn't a known property of 'div'. Can't bind to 'theme' since it isn't a known property of 'div'.

changeDetection: ChangeDetectionStrategy.OnPush,
  standalone: true,
  imports: [CommonModule, NgxEchartsModule],
  providers: [
    {
      provide: NGX_ECHARTS_CONFIG,
      useFactory: () => ({ echarts: () => import('echarts') }),
    },
  ],

[SGoerzen]

Same issue by using angular module in Angular 17

import { NgxEchartsModule } from 'ngx-echarts'; @NgModule({ imports: [ ..., NgxEchartsModule.forRoot({ echarts: () => import('echarts') }) ], }) export class AppModule {}