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

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

提问人:Scripta14 提问时间:3/9/2020 最后编辑:GiannisScripta14 更新时间:1/27/2022 访问量:15402

问:

我正在尝试这个关于 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
    };
}

应用组件:.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中,我试图离开并删除它,但在两个证明中它都不起作用。

Angular Typescript 高图表

评论


答:

15赞 Maciej Wojcik 3/9/2020 #1

您应该只在 imports 中导入模块,而不应在声明中声明任何特定组件:

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

评论

1赞 Scripta14 3/9/2020
多谢。。。我正在尝试这个例子,但我不明白问题出在哪里。只是为了提供信息,因为我是 highcharts 和 Angular 的初学者。在这种情况下,我必须导入库,因为我之前在我的项目文件夹中安装了 highchart?
0赞 Maciej Wojcik 3/10/2020
因此,每当您在 Angular 中使用某些库时,您都无法在模块中重新声明它的组件/管道/服务。您唯一应该并且实际上被允许做的事情是,我只是导入由库导出的模块。这样可以确保您拥有使用库所需的所有东西。
0赞 Bachu 5/11/2020
在 Angular 8 之前,我能够从 angular 库中导入组件并仅使用它。我可以看到在移动到 Angular 9 后,我也收到此错误 (NG6001),强制导入整个库模块。这是 Angular(9 以后)的新限制吗?我们将如何只导入组件,这将有助于摇树并帮助减小整体应用程序大小(在 Angular 9 中)?
1赞 Ken 1/6/2021
这是我的自定义库所需的确切答案。
-1赞 Panteleimon.Kylish 6/16/2020 #2

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

{
  "angularCompilerOptions": {
    "enableIvy": false
  }
}
0赞 Yuriy Gyerts 1/27/2022 #3

就我而言,问题是我尝试在不同的地方声明组件,然后在不同的模块不同文件夹中创建它。因此,您需要在组件附近添加模块,将此组件添加到创建的模块中,然后在您尝试声明组件的模块中,只需导入包含所需组件的创建模块即可。

在这里找到答案: https://github.com/angular/angular/issues/37047#issuecomment-634226777