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.

Solution

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 { }

Comments

[Scripta14]

thanks a lot...I was tryng that example and I hadn't understand where it was the problem. Just for info because I'm a beginner of highcharts and Angular..In this case I have to import the library because previuosly I had installed highchart in my project folder?

[Maciej Wojcik]

So whenever you use some library in Angular, you are unable to redeclare it components/pipes/services in your modules. The only thing that you should and you are actually allowed to do i just import the module which is exported by a library. That way its ensured that you have all things you need to use the library.

[Bachu]

Until Angular 8 I was able to import a component from an angular library and use only that. I could see after moving to Angular 9 I am also getting this error (NG6001), enforcing importing the entire library module. Is this a new restriction from Angular(9 onwards)? How we will import only the components, which will help the tree shaking and help reducing the overall application size (in Angular 9)?

[Ken]

This was the exact answer I needed for my custom library.