Angular自定义库使用highcharts-angular报chart属性未定义错误

该报错的核心是updateOrCreateChart方法执行时，组件内部获取到的Highcharts实例为undefined，调用Highcharts.chart()方法时触发空指针异常。

• 修正Highcharts导入方式
  在用到Highcharts的TS文件顶部，使用全量导入而非默认导入，避免CommonJS兼容问题导致的实例为空：

// 正确写法
import * as Highcharts from 'highcharts';
// 不要用这种默认导入写法
// import Highcharts from 'highcharts';

• 自定义库模块正确注册依赖
  在你的Angular自定义库的模块文件中，导入并注册highcharts-angular提供的组件模块：

import { NgModule } from '@angular/core';
import { HighchartsChartModule } from 'highcharts-angular';
// 导入你自己的库组件
import { DashboardComponent } from './dashboard.component';

@NgModule({
  declarations: [DashboardComponent],
  imports: [HighchartsChartModule],
  exports: [DashboardComponent]
})
export class YourCustomLibModule { }

• 调整自定义库打包配置
  修改自定义库根目录下的ng-package.json，将highcharts和highcharts-angular设为外部依赖和对等依赖，不要打包到自定义库产物中，避免重复实例冲突：

{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/your-custom-lib",
  "lib": {
    "entryFile": "src/public-api.ts",
    "externals": {
      "highcharts": "Highcharts",
      "highcharts-angular": "highcharts-angular"
    }
  },
  "peerDependencies": {
    "@angular/common": "^你的Angular主版本号",
    "@angular/core": "^你的Angular主版本号",
    "highcharts": "^你使用的highcharts版本号",
    "highcharts-angular": "^你使用的highcharts-angular版本号"
  }
}

• 渲染前增加实例存在性判断
  在highcharts组件标签上增加*ngIf判断，等Highcharts实例初始化完成后再渲染组件，避免初始化时序问题：

<highcharts-chart
  class="area-chart"
  *ngIf="Highcharts"
  [Highcharts]="Highcharts"
  [options]="chartOptions"
></highcharts-chart>

• 父项目单独安装依赖
  如果该自定义库是供其他项目引入使用，要求接入的父项目单独安装对应版本的依赖：

npm install highcharts@<你的版本号> highcharts-angular@<你的版本号>

内容的提问来源于stack exchange，提问作者Omar Talat