[Solved]-Use a specific map in angular2-highmaps and angular-cli-Highcharts

To load maps you could try with something like:

import { ChartModule } from 'angular2-highcharts';
import * as Highcharts from 'highcharts/highmaps';

// add your maps here as they will be added to Highcharts variable
...
imports: [
  ChartModule.forRoot(
    Highcharts
  ),
}

You are using Highcharts.maps['custom/world'] so you should load the file with map. The file is JS script that adds to Highcharts.maps the map file that is later used in chart's config.

If there are problems with loading Highmaps you could try with Highcharts + map module. However, the Angular2-highcharts using forRoot with modules applied internally to the Highcharts and without adding map module first there will not be Highcharts.maps, so you will not be able to load any maps - you could try with:

import * as Highcharts from 'highcharts';
require('highcharts/modules/map')(Highcharts);
// add maps here
...
imports: [
  ChartModule.forRoot(
    Highcharts // this will pass Highcharts with the map module and maps
  ),
}

Another option would be to replace mapData: Highcharts.maps['custom/world'], in series config with content of the map file.

EDIT:

Here's a demo for using Highmaps with angular2-highcharts: http://plnkr.co/edit/AmDfKwhRhshFn3CPprkk?p=preview

If you wan to load mapData from file I suggest loading it as a JSON data from GeoJSON files in map collection or nest the JS map file with same code as modules have (example):

(function(factory) {
    if (typeof module === 'object' && module.exports) {
        module.exports = factory;
    } else {
        factory(Highcharts);
    }
}(function(Highcharts) {
...
// map file here
...
}));

Next, you could load this as other modules - require('./path-to-map/your-edited-map-file')' in 'forRoot'. You might need to setallowJstotrueincompilerOptionsintsconfig.json` on top level of your angular app.