Angular2 HighCharts Can't Find Module highcharts-3d

Question

I'm trying to integrate the 3d highcharts module to my app, the other chats works fine, but when I add the 3d module, I get on this line a compile error:

import Highcharts3d from 'highcharts/highcharts-3d';

and the compiler says:

The module Highcharts3d canno't be found

this is my system js comfig:

I just follow this page configuration: https://www.npmjs.com/package/angular2-highcharts

  var  map = {
    'app':                        'app', // 'dist',
    'rxjs':                       'https://npmcdn.com/rxjs@5.0.0-beta.6',
    'angular2-in-memory-web-api': 'https://npmcdn.com/angular2-in-memory-web-api', // get latest,
    'angular2-highcharts':        'https://cdn.rawgit.com/gevgeny/angular2-highcharts/0.1.0/dist', 
    'highcharts/highstock.src':   'https://cdn.rawgit.com/highcharts/highcharts-dist/v4.2.1/highstock.js',
    'highcharts/highcharts-3d':   'https://cdn.rawgit.com/highcharts/highcharts-dist/v4.2.1/highcharts-3d.src.js',
  };

Any ideas of what am I doing whrong?

Answer 1

Insted of that code you should use this lines of code:

import { CHART_DIRECTIVES, Highcharts } from 'angular2-highcharts';

System.import('highcharts/highcharts-3d').then((Highcharts3d) => {
      Highcharts3d(Highcharts);
});

Best regards