Issue transferring Angular2 example from Plnkr to real application

Question

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?

Answer 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