initChart fails with latest version

[AlexBerlo]

Hi gevgeny,

I'm having some issues getting http://plnkr.co/edit/IuwjpPB1YQW1T7i4B8SZ?p=preview to run with the latest version. From what I can see in the plunkr, it is using 0.3.0 and the current version is 0.3.4

Below is my app.component

`import { Component } from '@angular/core'; import { ChartModule } from 'angular2-highcharts';

@Component({ selector: 'my-app', template: <chart [options]="options"></chart> })

export class AppComponent { constructor() { this.options = { chart: {type: 'spline'}, title : { text : 'simple chart' }, series: [{ data: [29.9, 71.5, 106.4, 129.2], }] }; } options: Object; }`

And this is the stacktrace I'm getting.

Error: Chart is unknown chart type. at Object.initChart (initChart.ts:6) at ChartComponent.init (ChartComponent.ts:39) at ChartComponent.ngAfterViewInit (ChartComponent.ts:46) at DebugAppView._View_AppComponent0.detectChangesInternal (AppComponent.ngfactory.js:74) at DebugAppView.AppView.detectChanges (core.umd.js:9546) at DebugAppView.detectChanges (core.umd.js:9651) at DebugAppView.AppView.detectViewChildrenChanges (core.umd.js:9572) at DebugAppView.AppView.detectChangesInternal (core.umd.js:9557) at DebugAppView.AppView.detectChanges (core.umd.js:9546) at DebugAppView.detectChanges (core.umd.js:9651)

Maybe something happened with the latest version ?

[Fank]

Ehm your plunker works fine for me:

[AlexBerlo]

That plunker is an example from this github page which uses 0.3.0 version (you can see that in system.config.js) . I'm tying to do something based on that plunker with the latest version from npm which is 0.3.4 and that is where I get the crash.

[SudharsanSukumar]

Are you importing the ChartModule anywhere?

[AlexBerlo]

I just copied the plunker. I'm importing it in AppComponent and AppModule.

import { Component } from '@angular/core'; import { ChartModule } from 'angular2-highcharts';

@Component({ selector: 'my-app', styles: [ chart { display: block; } ], template: <chart [options]="options"></chart> })

export class AppComponent { constructor() { this.options = { chart: {type: 'spline'}, title : { text : 'simple chart' }, series: [{ data: [29.9, 71.5, 106.4, 129.2], }] }; } options: HighchartsOptions; }

import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { ChartModule } from 'angular2-highcharts'; import { AppComponent } from './app.component';

@NgModule({ imports: [BrowserModule, ChartModule], declarations: [AppComponent], bootstrap: [AppComponent] })

export class AppModule { }

[AlexBerlo]

My bad, it was a systemjs configuration issue.

[beabri]

@Alexbaner, could you please write me your systemjs configuration? I'm having your same issue:

Here my app.module.ts:

import { ChartModule } from 'angular2-highcharts';

@NgModule({
  imports: [
    ChartModule.forRoot('highcharts')
  ]
})
export class AppModule {
}

My sistemjs.config.js:

    map: {
        'angular2-highcharts': 'npm:angular2-highcharts',
        'highcharts': 'npm:highcharts'
    },
    packages: {
        highcharts: {
            main: './highcharts.js',
            defaultExtension: 'js'
        },
        'angular2-highcharts': {
            main: './index.js',
            defaultExtension: 'js'
        }            
    }

And, inside my component:

import { Component } from '@angular/core';
import { ChartModule } from 'angular2-highcharts';

@Component({
  selector: 'highchart',
  template: '<chart [options]="options">'
})

constructor() {
    this.options = {
        title : { text : 'angular2-highcharts example' },
        series: [{
            name: 's1',
            data: [2,3,5,8,13],
            allowPointSelect: true
        },{
            name: 's2',
            data: [-2,-3,-5,-8,-13],
            allowPointSelect: true
        }]
    };

    console.log(this.options);
} 
options: Object;

[AlexBerlo]

Hi,

I'm sorry but that was a long time ago, I don't have those configs anymore. I stopped using systemjs and started using webpack which I recommend for you also.

Regards

On Wed, Mar 1, 2017 at 2:05 PM, beabri notifications@github.com wrote:

@Alexbaner https://github.com/Alexbaner, could you please write me your systemjs configuration? I'm having your same issue:

[image: schermata 2017-03-01 alle 12 43 21] https://cloud.githubusercontent.com/assets/16668179/23458784/e3bb39d6-fe7d-11e6-88de-5b8ada4fdb53.png

Here my app.module.ts:

import { ChartModule } from 'angular2-highcharts';

@NgModule({ imports: [ ChartModule.forRoot('highcharts') ] }) export class AppModule { }

My sistemjs.config.js:

map: {
    'angular2-highcharts': 'npm:angular2-highcharts',
    'highcharts': 'npm:highcharts'
},
packages: {
    highcharts: {
        main: './highcharts.js',
        defaultExtension: 'js'
    },
    'angular2-highcharts': {
        main: './index.js',
        defaultExtension: 'js'
    }
}

And, inside my component:

import { Component } from '@angular/core'; import { ChartModule } from 'angular2-highcharts';

@Component({ selector: 'highchart', template: '<chart [options]="options">' })

constructor() { this.options = { title : { text : 'angular2-highcharts example' }, series: [{ name: 's1', data: [2,3,5,8,13], allowPointSelect: true },{ name: 's2', data: [-2,-3,-5,-8,-13], allowPointSelect: true }] };

console.log(this.options);

} options: Object;

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/gevgeny/angular2-highcharts/issues/83#issuecomment-283323185, or mute the thread https://github.com/notifications/unsubscribe-auth/ACo02qRA4d81Tkk9fTvIUP4so8TTjnpPks5rhV79gaJpZM4KM8W9 .