angular2-highcharts with webpack configuration issue

RamitAnandSharma commented 8 years ago

I was trying to recreate an example from the highcharts website which includes ScatterPlot.

http://www.highcharts.com/demo/bubble/grid But it seems that isn't working with Angular-CLI Project.

angular-cli.json

"scripts": [ "../node_modules/highcharts/highstock.js", "../node_modules/highcharts/highcharts-more.js", "../node_modules/highcharts/highcharts-3d.js" ......... ]

app.module.ts

import { ChartModule } from 'angular2-highcharts'; @NgModule({ declarations: [ ....... ], imports: [ ChartModule, ................. ],

package.json

"dependencies": { "angular2-highcharts": "^0.3.4", ......... }

app.chart.component.ts

import { Highcharts } from 'angular2-highcharts'; import HighchartsMore from 'highcharts/highcharts-more';

HighchartsMore(Highcharts);

Error

Cannot find module 'highcharts/highcharts-more'.

I have tries https://github.com/gevgeny/angular2-highcharts also I am still not able to configure the chart, can you please share a sample how to configure it.

Angular version : 2.1.0 Angular CLI: beta.14

gevgeny commented 8 years ago

See the examples https://github.com/gevgeny/angular2-highcharts/tree/master/examples/src especially highchartsModuleExample.ts

RamitAnandSharma commented 8 years ago

I have updated the code But still isn't working with Angular-CLI Project.

npm install angular2-highcharts --save

Removed from angular-cli.json "../node_modules/highcharts/highcharts-more.js", "../node_modules/highcharts/highcharts-3d.js"

app.module.ts

import { ChartModule } from 'angular2-highcharts/index'; @NgModule({ declarations: [ ....... ], imports: [ ChartModule, ................. ],

package.json

"dependencies": { "angular2-highcharts": "^0.3.4", ......... }

app.chart.component.ts

import { Highcharts } from 'angular2-highcharts/index'; import * as Highcharts3d from 'highcharts/highcharts-3d'; Highcharts3d(Highcharts);

Error

Cannot find module 'highcharts/highcharts-more'.

unaor commented 8 years ago

@RamitAnandSharma Any luck with this?

RamitAnandSharma commented 8 years ago

Add in app.chart.component.ts

declare var require: any;
var Highcharts = require('highcharts/highcharts');
var HighchartsMore = require('highcharts/highcharts-more');
HighchartsMore(Highcharts);