提问人:Scripta14 提问时间:3/9/2020 最后编辑:GiannisScripta14 更新时间:1/27/2022 访问量:15402
错误 NG6001:无法在 NgModule 中声明“Highchar tsChartComponent”,因为它不是当前编译的一部分
error NG6001: Cannot declare 'Highchar tsChartComponent' in an NgModule as it's not a part of the current compilation
问:
我正在尝试这个关于 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中,我试图离开并删除它,但在两个证明中它都不起作用。
答:
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
评论