Amcharts 角度：未捕获的类型错误：无法读取未定义的属性“指令”

Question

我正在尝试将 AmCharts 库与我的 Angular-seed 应用程序 Mgechev Here is the link. 集成

这是我在终端中遇到的错误：

错误：/Users/adityashukla/Documents/Code/github/amcharts-with-angular2/src/client/app/about/about.component.ts[24, 2]：为方法 ngOnInit 实现生命周期挂钩接口 OnInit关于组件类

这就是我在 Chrome 控制台中得到的：

app.js?1498467214338:12 Uncaught TypeError: Cannot read property 'Directive' of undefined  

下面是代码：

关于.component.ts

import { Component } from '@angular/core';
import { AmChartsService } from '@amcharts/amcharts3-angular';

@Component({
moduleId: module.id,
selector: 'sd-about',
templateUrl: 'about.component.html',
styleUrls: ['about.component.css']
})
export class AboutComponent {
private timer: any;
private chart: any;
constructor(private AmCharts: AmChartsService) { }
var dataProvider = [];
for (var year = 1950; year <= 2005; ++year) {
dataProvider.push({
year: '' + year,
value: Math.floor(Math.random() * 100) - 50
});
}


return dataProvider;
}
ngOnInit() {
this.chart = this.AmCharts.makeChart(
'chartdiv', {
'type': 'pie',
'theme': 'light',
'dataProvider': [
{
'title': 'New', 'value': 4852
},
{
'title': 'Returning',
'value': 9899
}
],
'titleField': 'title',
'valueField': 'value',
'labelRadius': 5,
'innerRadius': '60%',
'labelText': '[[title]]',
}
);
}
}

关于.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AboutRoutingModule } from './about-routing.module';
import { AmChartsModule } from '@amcharts/amcharts3-angular';

@NgModule({
imports: [CommonModule, AboutRoutingModule, AmChartsModule],
declarations: [AboutComponent],
exports: [AboutComponent]
})
export class AboutModule { }

当我尝试运行时 > npm run start.deving 图表正在显示，但在控制台中出现错误

 404: /base/node_modules/@amcharts/amcharts3-angular/umd/index.js  

我的 package.json 看起来像这样：

"dependencies": {  
"@amcharts/amcharts3-angular": "^1.2.1"  
}

我已经在 SeedConfig aka SystemJS 中像这样映射 Amcharts umd

SYSTEM_CONFIG: any = this.SYSTEM_CONFIG_DEV;  
 SYSTEM_BUILDER_CONFIG: any = {  
...  
...  
paths: {  
'@amcharts/amcharts3-angular': 'node_modules/@amcharts/amcharts3-angular/umd/index.js',  
},
map: {
  '@amcharts/amcharts3-angular': 'node_modules/@amcharts/amcharts3-angular/umd/index.js',
},

谁能告诉我如何解决这个问题？提前致谢。

Answer 1

在您的.ts 文件中添加以下内容。

import { Component,OnInit } from '@angular/core';

并用类名添加这个

export class AboutComponent implements OnInit {}