Highcharts контекстное меню по нажатию кнопки в угловых

Question

Я пытался создать собственное контекстное меню в угловых старших диаграммах при щелчке левой кнопкой мыши. Я следовал по коду по ссылке (https://stackblitz.com/edit/ngx-contextmenu-example), но получаю ошибки ниже:

ERROR Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'contextMenu' since it isn't a known property of 'highcharts-chart'.
1. If 'highcharts-chart' is an Angular component and it has 'contextMenu' input, then verify that it is part of this module.
2. If 'highcharts-chart' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("ighcharts" [options]="chartOptions" [(update)]="chartUpdateFlag" 
  (click)="chartClicked($event)" [ERROR ->][contextMenu]="basicMenu" [oneToOne]="true"
    class="w-100p d-block">
  </highcharts-chart>
"): ng:///DashboardModule/KpiReportTrendComponent.html@17:33
Event binding execute not emitted by any directive on an embedded template. Make sure that the event name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("

<context-menu>
    <ng-template contextMenuItem [ERROR ->](execute)="showMessage($event)">
      Option A
    </ng-template>
"): ng:///DashboardModule/KpiReportTrendComponent.html@133:33
Event binding execute not emitted by any directive on an embedded template. Make sure that the event name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("g-template contextMenuItem divider="true"></ng-template>
    <ng-template contextMenuItem let-item [ERROR ->](execute)="showMessage($event)">
      Option B
    </ng-template>
"): ng:///DashboardModule/KpiReportTrendComponent.html@137:42
'context-menu' is not a known element:
1. If 'context-menu' is an Angular component, then verify that it is part of this module.
2. If 'context-menu' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("


[ERROR ->]<context-menu>
    <ng-template contextMenuItem (execute)="showMessage($event)">
      Option A
"): ng:///DashboardModule/KpiReportTrendComponent.html@132:0
Can't bind to 'contextMenu' since it isn't a known property of 'highcharts-chart'.
1. If 'highcharts-chart' is an Angular component and it has 'contextMenu' input, then verify that it is part of this module.
2. If 'highcharts-chart' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("ighcharts" [options]="chartOptions" [(update)]="chartUpdateFlag" 
  (click)="chartClicked($event)" [ERROR ->][contextMenu]="basicMenu" [oneToOne]="true"
    class="w-100p d-block">
  </highcharts-chart>
"): ng:///DashboardModule/KpiReportTrendComponent.html@17:33
Event binding execute not emitted by any directive on an embedded template. Make sure that the event name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("

<context-menu>
    <ng-template contextMenuItem [ERROR ->](execute)="showMessage($event)">
      Option A
    </ng-template>
"): ng:///DashboardModule/KpiReportTrendComponent.html@133:33
Event binding execute not emitted by any directive on an embedded template. Make sure that the event name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("g-template contextMenuItem divider="true"></ng-template>
    <ng-template contextMenuItem let-item [ERROR ->](execute)="showMessage($event)">
      Option B
    </ng-template>
"): ng:///DashboardModule/KpiReportTrendComponent.html@137:42
'context-menu' is not a known element:
1. If 'context-menu' is an Angular component, then verify that it is part of this module.
2. If 'context-menu' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("


[ERROR ->]<context-menu>
    <ng-template contextMenuItem (execute)="showMessage($event)">
      Option A
"): ng:///DashboardModule/KpiReportTrendComponent.html@132:0
Error: Template parse errors:
Can't bind to 'contextMenu' since it isn't a known property of 'highcharts-chart'.
1. If 'highcharts-chart' is an Angular component and it has 'contextMenu' input, then verify that it is part of this module.
2. If 'highcharts-chart' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("ighcharts" [options]="chartOptions" [(update)]="chartUpdateFlag" 
  (click)="chartClicked($event)" [ERROR ->][contextMenu]="basicMenu" [oneToOne]="true"
    class="w-100p d-block">
  </highcharts-chart>
"): ng:///DashboardModule/KpiReportTrendComponent.html@17:33
Event binding execute not emitted by any directive on an embedded template. Make sure that the event name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("

<context-menu>
    <ng-template contextMenuItem [ERROR ->](execute)="showMessage($event)">
      Option A
    </ng-template>
"): ng:///DashboardModule/KpiReportTrendComponent.html@133:33
Event binding execute not emitted by any directive on an embedded template. Make sure that the event name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("g-template contextMenuItem divider="true"></ng-template>
    <ng-template contextMenuItem let-item [ERROR ->](execute)="showMessage($event)">
      Option B
    </ng-template>
"): ng:///DashboardModule/KpiReportTrendComponent.html@137:42
'context-menu' is not a known element:
1. If 'context-menu' is an Angular component, then verify that it is part of this module.
2. If 'context-menu' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("


[ERROR ->]<context-menu>
    <ng-template contextMenuItem (execute)="showMessage($event)">
      Option A
"): ng:///DashboardModule/KpiReportTrendComponent.html@132:0
Can't bind to 'contextMenu' since it isn't a known property of 'highcharts-chart'.
1. If 'highcharts-chart' is an Angular component and it has 'contextMenu' input, then verify that it is part of this module.
2. If 'highcharts-chart' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("ighcharts" [options]="chartOptions" [(update)]="chartUpdateFlag" 
  (click)="chartClicked($event)" [ERROR ->][contextMenu]="basicMenu" [oneToOne]="true"
    class="w-100p d-block">
  </highcharts-chart>
"): ng:///DashboardModule/KpiReportTrendComponent.html@17:33
Event binding execute not emitted by any directive on an embedded template. Make sure that the event name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("

<context-menu>
    <ng-template contextMenuItem [ERROR ->](execute)="showMessage($event)">
      Option A
    </ng-template>
"): ng:///DashboardModule/KpiReportTrendComponent.html@133:33
Event binding execute not emitted by any directive on an embedded template. Make sure that the event name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("g-template contextMenuItem divider="true"></ng-template>
    <ng-template contextMenuItem let-item [ERROR ->](execute)="showMessage($event)">
      Option B
    </ng-template>
"): ng:///DashboardModule/KpiReportTrendComponent.html@137:42
'context-menu' is not a known element:
1. If 'context-menu' is an Angular component, then verify that it is part of this module.
2. If 'context-menu' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("


[ERROR ->]<context-menu>
    <ng-template contextMenuItem (execute)="showMessage($event)">
      Option A
"): ng:///DashboardModule/KpiReportTrendComponent.html@132:0
    at syntaxError (compiler.js:2430)
    at TemplateParser.push../node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse (compiler.js:20605)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate (compiler.js:26171)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate (compiler.js:26158)
    at compiler.js:26101
    at Set.forEach (<anonymous>)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (compiler.js:26101)
    at compiler.js:26011
    at Object.then (compiler.js:2421)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:26010)
    at resolvePromise (zone.js:831)
    at resolvePromise (zone.js:788)
    at zone.js:892
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
    at Object.onInvokeTask (core.js:17290)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
    at drainMicroTaskQueue (zone.js:601)
    at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:502)
    at invokeTask (zone.js:1744)

Пожалуйста, проверьте код ниже для справки:

<highcharts-chart [Highcharts]="highcharts" [options]="chartOptions" [(update)]="chartUpdateFlag" 
  (click)="chartClicked($event)" [contextMenu]="basicMenu" [oneToOne]="true"
    class="w-100p d-block">
</highcharts-chart>

<context-menu>
    <ng-template contextMenuItem (execute)="showMessage($event)">
      Option A
    </ng-template>
    <ng-template contextMenuItem divider="true"></ng-template>
    <ng-template contextMenuItem let-item (execute)="showMessage($event)">
      Option B
    </ng-template>
</context-menu>

Я также импортировалContextMenuModule в app.module.ts и прошел через всю документацию высоких диаграмм, но все еще получает ошибки выше. Пожалуйста, проверьте и предложите возможное решение. Во-первых, я хочу, чтобы это работало, и, во-вторых, я хочу, чтобы это было нажатием левой кнопки вместо правой.