错误 NG6001：无法在 NgModule 中声明“Highchar tsChartComponent”，因为它不是当前编译的一部分

Question

我正在尝试这个关于 Highcharts 的演示应用程序。我从两个网站上找到了相同的代码并进行了尝试，但在这两个网站中我都在继续捕获相同的错误。

    ERROR in src/app/app.module.ts:11:5 - error NG6001: Cannot declare 'Highchar
tsChartComponent' in an NgModule as it's not a part of the current compilation.

    11     HighchartsChartComponent
           ~~~~~~~~~~~~~~~~~~~~~~~~

      node_modules/highcharts-angular/lib/highcharts-chart.component.d.ts:4:22
        4 export declare class HighchartsChartComponent implements OnDestroy {
                               ~~~~~~~~~~~~~~~~~~~~~~~~
        'HighchartsChartComponent' is declared here.
    src/app/app.component.html:3:1 - error NG8001: 'highcharts-chart' is not a k
nown element:
    1. If 'highcharts-chart' is an Angular component, then verify that it is par
t 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 <highcharts-chart
      ~~~~~~~~~~~~~~~~~
    4    [Highcharts] = "highcharts"
      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    5    [options] = "chartOptions"
      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    6    style = "width: 100%; height: 400px; display: block;">
      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

      src/app/app.component.ts:6:16
        6   templateUrl: './app.component.html',
                         ~~~~~~~~~~~~~~~~~~~~~~
        Error occurs in the template of component AppComponent.
    src/app/app.component.html:4:4 - error NG8002: Can't bind to 'Highcharts' si
nce it isn't a known property of 'highcharts-chart'.
    1. If 'highcharts-chart' is an Angular component and it has 'Highcharts' inp
ut, 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' o
f this component.

    4    [Highcharts] = "highcharts"
         ~~~~~~~~~~~~~~~~~~~~~~~~~~~

      src/app/app.component.ts:6:16
        6   templateUrl: './app.component.html',
                         ~~~~~~~~~~~~~~~~~~~~~~
        Error occurs in the template of component AppComponent.
    src/app/app.component.html:5:4 - error NG8002: Can't bind to 'options' since
 it isn't a known property of 'highcharts-chart'.
    1. If 'highcharts-chart' is an Angular component and it has 'options' 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' o
f this component.

    5    [options] = "chartOptions"
         ~~~~~~~~~~~~~~~~~~~~~~~~~~

      src/app/app.component.ts:6:16
        6   templateUrl: './app.component.html',
                         ~~~~~~~~~~~~~~~~~~~~~~
        Error occurs in the template of component AppComponent.

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HighchartsChartComponent } from 'highcharts-angular';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
    HighchartsChartComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

import { Component } from '@angular/core';
import * as Highcharts from 'highcharts';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
    title = 'myHighchart';

    data = [{
            name: 'ItSolutionStuff.com',
            data: [500, 700, 555, 444, 777, 877, 944, 567, 666, 789, 456, 654]
         },{
            name: 'Nicesnippets.com',
            data: [677, 455, 677, 877, 455, 778, 888, 567, 785, 488, 567, 654]
         }];

    highcharts = Highcharts;
    chartOptions = {   
      chart: {
         type: "spline"
      },
      title: {
         text: "Monthly Site Visitor"
      },
      xAxis:{
         categories:["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
      },
      yAxis: {          
         title:{
            text:"Visitors"
         } 
      },
      series: this.data
    };
}

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>

在 app.component.html 我试图离开并删除它，但在两个证明中它都不起作用。

Answer 1

问题可能出在 Ivy 编译器上，在 Angular AOT 编译中，默认使用 Ivy。尝试在 tsconfig.json 中禁用 Ivy：

{
  "angularCompilerOptions": {
    "enableIvy": false
  }
}

Answer 2

您应该只在导入中导入模块，而不是在声明中声明任何特定组件：

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    HighchartsChartModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }