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

user_11225863 0
Viewed 12354

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.

angular typescript highcharts
3 Answers

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

The problem could be with Ivy compiler, in Angular AOT compilation Ivy is used by default. Try to disable Ivy in tsconfig.json:

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

In my case, the issue was that I try to declare component in different place then I created it, in the different module different folder. So you need to add module near your component, add this component into created module, then in the module where you tried to declare your component just import created module which contains required component.

Answer found here: https://github.com/angular/angular/issues/37047#issuecomment-634226777

user_31567570
Related