Not compatible with latest Highcharts 11.4.6

[rbirkgit]

Describe the bug

We updated from Highcharts 11.4.3 to 11.4.6 and now get compile errors.

      Error: apps/deployment/src/app/deployments/deployments.component.html:29:12 - error TS2322: Type 'import("D:/Git/cloud-ui/node_modules/highcharts/highcharts.src").Options' is not assignable to type 'Highcharts.Options'.
        Types of property 'accessibility' are incompatible.
          Type 'import("D:/Git/cloud-ui/node_modules/highcharts/highcharts.src").AccessibilityOptions | undefined' is not assignable to type 'Highcharts.AccessibilityOptions | undefined'.
            Type 'import("D:/Git/cloud-ui/node_modules/highcharts/highcharts.src").AccessibilityOptions' is not assignable to type 'Highcharts.AccessibilityOptions'.
              Types of property 'announceNewData' are incompatible.
                Type 'import("D:/Git/cloud-ui/node_modules/highcharts/highcharts.src").AccessibilityAnnounceNewDataOptionsObject | undefined' is not assignable to type 'Highcharts.AccessibilityAnnounceNewDataOptionsObject | undefined'.
                  Type 'import("D:/Git/cloud-ui/node_modules/highcharts/highcharts.src").AccessibilityAnnounceNewDataOptionsObject' is not assignable to type 'Highcharts.AccessibilityAnnounceNewDataOptionsObject'.
                    Types of property 'announcementFormatter' are incompatible.
                      Type 'import("D:/Git/cloud-ui/node_modules/highcharts/highcharts.src").AccessibilityAnnouncementFormatter | undefined' is not assignable to type 'Highcharts.AccessibilityAnnouncementFormatter | undefined'.
                        Type 'import("D:/Git/cloud-ui/node_modules/highcharts/highcharts.src").AccessibilityAnnouncementFormatter' is not assignable to type 'Highcharts.AccessibilityAnnouncementFormatter'.
                          Types of parameters 'updatedSeries' and 'updatedSeries' are incompatible.
                            Type 'Highcharts.Series[]' is not assignable to type 'import("D:/Git/cloud-ui/node_modules/highcharts/highcharts.src").Series[]'.
                              Type 'Highcharts.Series' is not assignable to type 'import("D:/Git/cloud-ui/node_modules/highcharts/highcharts.src").Series'.
                                Types of property 'area' are incompatible.
                                  Type 'Highcharts.SVGElement | undefined' is not assignable to type 'import("D:/Git/cloud-ui/node_modules/highcharts/highcharts.src").SVGElement | undefined'.
                                    Type 'SVGElement' is missing the following properties from type 'SVGElement': setPolygon, setTextPath

      29           [options]="chartDeployments"
                    ~~~~~~~

        apps/deployment/src/app/deployments/deployments.component.ts:29:16
          29   templateUrl: './deployments.component.html',
                            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
          Error occurs in the template of component DeploymentsComponent.

Expected behavior

Expect code to build

Demo

This is our html code:

        <highcharts-chart
          [Highcharts]="Highcharts"
          [options]="chartDeployments"
          [update]="updateMap.deployments">
        </highcharts-chart>

Steps required to recreate the problem in the demo:

1. ...

Setup used

• NodeJS version ... 20.13.0
• Angular version ... 17.3.8
• TypeScript version ... 5.4.5
  etc.

[rbirkgit]

Changing our imports from this:
import Highcharts from 'highcharts/es-modules/masters/highcharts.src';
to this makes it work:
import Highcharts from 'highcharts';

[rbirkgit]

Looking at the wrapper code:

import type * as Highcharts from 'highcharts';
import type HighchartsESM from 'highcharts/es-modules/masters/highcharts.src';
export declare class HighchartsChartComponent implements OnDestroy, OnChanges {
    Highcharts: typeof Highcharts | typeof HighchartsESM;
    options: Highcharts.Options;

I see that the options property is only using the classic Options type, which with latest version is not in sync with the ESM Options

Type 'SVGElement' is missing the following properties from type 'SVGElement': setPolygon, setTextPath

[rbirkgit]

I tried adding the textpath module, but still same issue:

import Highcharts from 'highcharts/es-modules/masters/highcharts.src';
import 'highcharts/es-modules/masters/modules/textpath.src';

[karolkolodziej]

Hi @rbirkgit!

I've tested it with "highcharts": "^11.4.6" and "highcharts-angular": "^4.0.0" but unfortunately I'm not able to recreate it.
Both imports work without any error.

Could you please create a demo/repo where the issue is visible?

[rbirkgit]

I found the difference needed to reproduce. We also had this import. Without, it compiles.

import 'highcharts/es-modules/masters/highcharts-more.src';

[karolkolodziej]

@rbirkgit With an additional highcharts-more module I can recreate it. Let me investigate it 😉

[karolkolodziej]

We stated that the option type should be the one from the classic import.
As a workaround, you can import types separately like:

import { HighchartsChartModule } from 'highcharts-angular';
import type HighchartsType from 'highcharts';
import Highcharts from 'highcharts/es-modules/masters/highcharts.src';
import 'highcharts/es-modules/masters/highcharts-more.src';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, HighchartsChartModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
    Highcharts: typeof Highcharts = Highcharts;
    chartOptions: HighchartsType.Options = {
      series: [{
        data: [1, 2, 3],
        type: 'line'
      }]
    };
}

[rbirkgit]

Thanks for quick fix. Looking forward to next update!

[rbirkgit]

Curious as we prefer waiting for updated version instead of adding workarounds. What rough timeframe do you think it will be for updated version to be released?

[karolkolodziej]

We are planning to add some new things so a bigger release should be at the end of summer but we can release a patch within a week with this fix 😉

[karolkolodziej]

v4.0.1 has been just released 🎉