Question

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

以下是我在终端中收到的错误：

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

这就是我在Chrome控制台中获得的内容：

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

以下是代码：

about.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]]',
}
);
}
}

about.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 { }

当我尝试运行＆gt; npm run start.deving 图表正在显示，但在控制台中显示错误

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

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

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

我已经在SeedConfig又称SystemJS

中映射了这样的Amcharts

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

Amcharts angular：Uncaught TypeError：无法读取属性＆＃39;指令＆＃39;未定义的

1 个答案: