error NG6001: Cannot declare 'Highchar tsChartComponent' in an NgModule as it's not a part of the current compilation

Question

I'm trying this demo application about Highcharts. I've found the same code from two web sites and tried it, but in both I'm carrying on to catch the same error.

    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>

In the app.component.html I've tried to leave and removed it but in both proofs it didn't work.

Answer 1

You should only import the module in imports, not declare any specific component in declarations:

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