1

I am trying to use HighStocks in an Angular2 app by copying this plnkr example... http://plnkr.co/edit/2xSewTZ9b213vA0ALmFq?p=preview

I'm trying to figure out how to pull in highstock.js into my app as I am getting an error saying...

core.umd.js?e2a5:3004 EXCEPTION: Error in ./XXX class XXX- inline template:1:25 caused by: StockChart is unknown chart type.

on this line of code in the template...

<chart type="StockChart" [options]="options"></chart>

In a 'real' ng2 app where/how would you bring in the below two packages/scripts. I think this is my problem...

  'angular2-highcharts':        'https://cdn.rawgit.com/gevgeny/angular2-highcharts/v0.3.0/dist', 
  'highcharts/highstock.src':   'https://cdn.rawgit.com/highcharts/highcharts-dist/v4.2.1/highstock.js'

In the example they are done in the systemjs.config.js file. My ng2 app has no such file.

Where is the best place to do this?

Ben Cameron
  • 4,335
  • 6
  • 51
  • 77
  • What sort of configuration files *does* your app have, then? Are you using e.g. Angular-CLI? – jonrsharpe Nov 24 '16 at 18:16
  • I'm using a basic webpack setup. I've uploaded an example to https://github.com/bencameron00/HighStocksSetup . As you can see in mainViewer.component.html the type attribute is causing the issue. They use this in the plnkr example however. What have I missed? Thank you for your help. – Ben Cameron Nov 25 '16 at 09:33
  • The github link gives 404 error. – Kacper Madej Jan 26 '17 at 13:38
  • I've readded the project to Github at https://github.com/bencameron00/Ng2HighStocks – Ben Cameron Jan 26 '17 at 14:36

1 Answers1

1

I found the solution. The solution for me was to add the below lines to my webpack.common.js file...

 resolve: {
      alias: {
        // NOTE: You should set 'highcharts/highcharts.src.js'
        // if you are not going to use <chart type="StockChart"
        highcharts$: "highcharts/highstock.src.js"
      },

I have updated my demo in GitHub with this change https://github.com/bencameron00/Ng2HighStocks

Ben Cameron
  • 4,335
  • 6
  • 51
  • 77
  • thanks Ben, this helps me in having my chart rendered in Browser but on Server-Side Terminal it still generates the error "EXCEPTION: StockChart is unknown chart type." and thus, server-side rendering is cancelled. Followed by "Error in SSR, serving for direct CSR". – Dynamic Remo Feb 02 '17 at 12:37
  • I've not tried server side rendering with it so I can't advise I'm afraid. If you find a solution please add it to the post as others might find it helpful. Sorry I can't be of more help. Good luck. – Ben Cameron Feb 02 '17 at 20:28