Angular集成Highcharts遇NG6001等系列错误，求解决方案

嘿，我帮你排查出问题所在啦，你的Highcharts Angular项目报错主要是两个关键问题导致的，咱们一步步来修复：

你遇到的NG6001、NG8001和NG8002错误，核心原因有两个：

1. 错误声明第三方组件：你把highcharts-angular库提供的HighchartsChartComponent放到了@NgModule的declarations数组里——这个数组只能用来注册你自己编写的组件/指令/管道，第三方库的组件需要通过导入对应的模块来使用。
2. 输入属性大小写不匹配：Angular的输入属性严格区分大小写，你模板里用了[Highcharts]，但组件实际暴露的输入属性是小驼峰的highcharts。

1. 修正AppModule的配置 #

把HighchartsChartComponent从declarations中移除，改为导入highcharts-angular提供的模块：

// app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
// 导入库的模块，而非单个组件
import { HighchartsChartModule } from 'highcharts-angular';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
    // 移除 HighchartsChartComponent
  ],
  imports: [
    BrowserModule,
    HighchartsChartModule // 将模块添加到imports数组
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. 修复模板的属性绑定 #

把模板里的[Highcharts]改成小写的[highcharts]，确保和组件的输入属性名称匹配：

<!-- app.component.html -->
<h1>Angular 8 Highcharts Example - ItSolutionStuff.com</h1>
<highcharts-chart 
  [highcharts]="highcharts" 
  [options]="chartOptions" 
  style="width: 100%; height: 400px; display: block;">
</highcharts-chart>

3. 确认依赖安装（可选） #

如果还未安装相关依赖，执行以下命令完成安装：

npm install highcharts highcharts-angular --save

• declarations是Angular用来识别本地组件的数组，第三方库的组件已经被封装在专属模块中，只需导入模块即可全局使用其中的组件。
• Angular的@Input()属性遵循小驼峰命名规范，模板中的属性绑定必须和组件类里的输入属性名称完全一致，否则会被识别为未知属性。

完成以上修改后，重启你的Angular项目，应该就能正常渲染Highcharts图表了。

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