'google-chart'不是已知元素:在角度中



我正在尝试在angular应用程序中添加谷歌图表,我已经完成了以下步骤

  1. npm install angular-google-charts --save

  2. 之后,我已经导入到应用程序模块。

import { GoogleChartsModule } from 'angular-google-charts';
@NgModule({
imports: [
GoogleChartsModule
],
})
export class AppModule {}
  1. 在myComponent.html中调用
<google-chart #chart [title]="title" [type]="type" [data]="data [columnNames]="columnNames" [options]="options" [width]="width [height]="height">
</google-chart>
  1. 在我的组件中.ts
import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';  
import { GoogleChartComponent } from 'angular-google-charts';  

@Component({  
selector: 'app-root',  
templateUrl: './app.component.html',  
styleUrls: ['./app.component.scss']  
})  
export class AppComponent implements OnInit{  
title = 'googlechart';  
type = 'PieChart';  
data = [  
['Name1', 5.0],  
['Name2', 36.8],  
['Name3', 42.8],  
['Name4', 18.5],  
['Name5', 16.2]  
];  
columnNames = ['Name', 'Percentage'];  
options = {      
};  
width = 500;  
height = 300;  
constructor(){}  
ngOnInit() {}  
}

错误:

error NG8001: 'google-chart' is not a known element:
1. If 'google-chart' is an Angular component, then verify that it is part of this module.    
2. If 'google-chart' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

组件已在库中导出。https://github.com/FERNman/angular-google-charts/blob/master/libs/angular-google-charts/src/lib/google-charts.module.ts#L13

您可以使用schemas: [ CUSTOM_ELEMENTS_SCHEMA ]

import { GoogleChartsModule } from 'angular-google-charts';
@NgModule({
imports: [
GoogleChartsModule
],
schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class AppModule {}

这将解决问题。

我通过将其放入shared.module.ts.来解决问题

而不是如图所示在AppModule中。

最新更新