Bigous
commented
8 years ago You must add Highcharts as a dependency of your project inside your webpack config.
If you are using the default AngularClass WebPack for Angular2, you should add at config/webpack.commom.js:
const ProvidePlugin = require('webpack/lib/ProvidePlugin');And in the same file, at the plugins session (arround line 190) add:
new ProvidePlugin({
Highcharts: "highcharts"
}),Don't forget the npm install and typings install for highcharts.
I'll update the ReadMe.MD to add this information soon.
ASK83
Hi, First of all thanks for this great repo. I am trying to use the ng2-highcharts with my webpack config I followed the instruction but for some reason it seems I cannot get it to work with my webpack configs. Basically I get "ReferenceError: Highcharts is not defined"
My config is like the webpack-seed by @angularclass. More specifically what I did was to install ng2-highcharts (0.3.4) and highcharts (4.2.5) as dependencies. import them in my vendor.ts as bellow: import 'ng2-highcharts'; import 'highcharts';
and add import {Ng2Highcharts} from 'ng2-highcharts/ng2-highcharts'; and directive to my component. But this does not work I get errors like below:
Is there anything that I am missing? Thank, Afi
EXCEPTION: Error in ./ChartTest class ChartTest - inline template:1:11 browser_adapter.ts?9397:78EXCEPTION: Error in ./ChartTest class ChartTest - inline template:1:11BrowserDomAdapter.logError @ browser_adapter.ts?9397:78BrowserDomAdapter.logGroup @ browser_adapter.ts?9397:89ExceptionHandler.call @ exception_handler.ts?f7a7:53(anonymous function) @ application_ref.ts?4850:304schedulerFn @ async.ts?efa5:131SafeSubscriber.__tryOrUnsub @ VM25299:225SafeSubscriber.next @ VM25299:174Subscriber._next @ VM25299:124Subscriber.next @ VM25299:88Subject._finalNext @ VM25295:128Subject._next @ VM25295:120Subject.next @ VM25295:77EventEmitter.emit @ async.ts?efa5:117onError @ ng_zone.ts?87e8:138onHandleError @ ng_zone_impl.ts?fbac:90ZoneDelegate.handleError @ zone.js?e3a6:327Zone.runTask @ zone.js?e3a6:259drainMicroTaskQueue @ zone.js?e3a6:474ZoneTask.invoke @ zone.js?e3a6:426 browser_adapter.ts?9397:78ORIGINAL EXCEPTION: ReferenceError: Highcharts is not definedBrowserDomAdapter.logError @ browser_adapter.ts?9397:78ExceptionHandler.call @ exception_handler.ts?f7a7:65(anonymous function) @ application_ref.ts?4850:304schedulerFn @ async.ts?efa5:131SafeSubscriber.__tryOrUnsub @ VM25299:225SafeSubscriber.next @ VM25299:174Subscriber._next @ VM25299:124Subscriber.next @ VM25299:88Subject._finalNext @ VM25295:128Subject._next @ VM25295:120Subject.next @ VM25295:77EventEmitter.emit @ async.ts?efa5:117onError @ ng_zone.ts?87e8:138onHandleError @ ng_zone_impl.ts?fbac:90ZoneDelegate.handleError @ zone.js?e3a6:327Zone.runTask @ zone.js?e3a6:259drainMicroTaskQueue @ zone.js?e3a6:474ZoneTask.invoke @ zone.js?e3a6:426 browser_adapter.ts?9397:78ORIGINAL STACKTRACE:BrowserDomAdapter.logError @ browser_adapter.ts?9397:78ExceptionHandler.call @ exception_handler.ts?f7a7:69(anonymous function) @ application_ref.ts?4850:304schedulerFn @ async.ts?efa5:131SafeSubscriber.__tryOrUnsub @ VM25299:225SafeSubscriber.next @ VM25299:174Subscriber._next @ VM25299:124Subscriber.next @ VM25299:88Subject._finalNext @ VM25295:128Subject._next @ VM25295:120Subject.next @ VM25295:77EventEmitter.emit @ async.ts?efa5:117onError @ ng_zone.ts?87e8:138onHandleError @ ng_zone_impl.ts?fbac:90ZoneDelegate.handleError @ zone.js?e3a6:327Zone.runTask @ zone.js?e3a6:259drainMicroTaskQueue @ zone.js?e3a6:474ZoneTask.invoke @ zone.js?e3a6:426 browser_adapter.ts?9397:78ReferenceError: Highcharts is not defined at Ng2Highcharts.set [as options] (eval at 441 (boot.bundle.js:58), <anonymous>:31:35) at DebugAppView._View_ChartTest0.detectChangesInternal (ChartTest.template.js:44) at DebugAppView.AppView.detectChanges (eval at <anonymous> (vendor.bundle.js:4874), <anonymous>:200:14) at DebugAppView.detectChanges (eval at <anonymous> (vendor.bundle.js:4874), <anonymous>:289:44) at DebugAppView.AppView.detectViewChildrenChanges (eval at <anonymous> (vendor.bundle.js:4874), <anonymous>:220:34) at DebugAppView._View_LoginComponent0.detectChangesInternal (LoginComponent.template.js:714) at DebugAppView.AppView.detectChanges (eval at <anonymous> (vendor.bundle.js:4874), <anonymous>:200:14) at DebugAppView.detectChanges (eval at <anonymous> (vendor.bundle.js:4874), <anonymous>:289:44) at DebugAppView.AppView.detectViewChildrenChanges (eval at <anonymous> (vendor.bundle.js:4874), <anonymous>:220:34) at DebugAppView._View_LoginComponent_Host0.detectChangesInternal (LoginComponent_Host.template.js:30)BrowserDomAdapter.logError @ browser_adapter.ts?9397:78ExceptionHandler.call @ exception_handler.ts?f7a7:70(anonymous function) @ application_ref.ts?4850:304schedulerFn @ async.ts?efa5:131SafeSubscriber.__tryOrUnsub @ VM25299:225SafeSubscriber.next @ VM25299:174Subscriber._next @ VM25299:124Subscriber.next @ VM25299:88Subject._finalNext @ VM25295:128Subject._next @ VM25295:120Subject.next @ VM25295:77EventEmitter.emit @ async.ts?efa5:117onError @ ng_zone.ts?87e8:138onHandleError @ ng_zone_impl.ts?fbac:90ZoneDelegate.handleError @ zone.js?e3a6:327Zone.runTask @ zone.js?e3a6:259drainMicroTaskQueue @ zone.js?e3a6:474ZoneTask.invoke @ zone.js?e3a6:426 browser_adapter.ts?9397:78ERROR CONTEXT:BrowserDomAdapter.logError @ browser_adapter.ts?9397:78ExceptionHandler.call @ exception_handler.ts?f7a7:74(anonymous function) @ application_ref.ts?4850:304schedulerFn @ async.ts?efa5:131SafeSubscriber.__tryOrUnsub @ VM25299:225SafeSubscriber.next @ VM25299:174Subscriber._next @ VM25299:124Subscriber.next @ VM25299:88Subject._finalNext @ VM25295:128Subject._next @ VM25295:120Subject.next @ VM25295:77EventEmitter.emit @ async.ts?efa5:117onError @ ng_zone.ts?87e8:138onHandleError @ ng_zone_impl.ts?fbac:90ZoneDelegate.handleError @ zone.js?e3a6:327Zone.runTask @ zone.js?e3a6:259drainMicroTaskQueue @ zone.js?e3a6:474ZoneTask.invoke @ zone.js?e3a6:426 browser_adapter.ts?9397:78DebugContext {_view: _View_ChartTest0, _nodeIndex: 1, _tplRow: 1, _tplCol: 11}BrowserDomAdapter.logError @ browser_adapter.ts?9397:78ExceptionHandler.call @ exception_handler.ts?f7a7:75(anonymous function) @ application_ref.ts?4850:304schedulerFn @ async.ts?efa5:131SafeSubscriber.__tryOrUnsub @ VM25299:225SafeSubscriber.next @ VM25299:174Subscriber._next @ VM25299:124Subscriber.next @ VM25299:88Subject._finalNext @ VM25295:128Subject._next @ VM25295:120Subject.next @ VM25295:77EventEmitter.emit @ async.ts?efa5:117onError @ ng_zone.ts?87e8:138onHandleError @ ng_zone_impl.ts?fbac:90ZoneDelegate.handleError @ zone.js?e3a6:327Zone.runTask @ zone.js?e3a6:259drainMicroTaskQueue @ zone.js?e3a6:474ZoneTask.invoke @ zone.js?e3a6:426 zone.js?e3a6:463ViewWrappedException {_wrapperMessage: "Error in ./ChartTest class ChartTest - inline template:1:11", _originalException: ReferenceError: Highcharts is not defined at Ng2Highcharts.set [as options] (eval at 441 (http:/…, _originalStack: "ReferenceError: Highcharts is not defined↵ at N…esInternal (LoginComponent_Host.template.js:30:8)", _context: DebugContext, _wrapperStack: "Error: Error in ./ChartTest class ChartTest - inli…esInternal (LoginComponent_Host.template.js:30:8)"}