[Solved]-Angular4 with highcharts can't use world.js-Highcharts

To load a map for Highmaps

A map is JSON type file containing mapData code used when a chart is created. Download a map from official Highcharts map collection in Javascript format or use a custom map and add it to your app. Edit the map file, so it could be loaded like a module by adding to beginning and end of a file code below:

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

...
/* map file data */
...

}));

In case of using a GeoJSON map file format you should add the above code and additionally, between the added beginning and the map file data, the below code:

Highcharts.maps["myMapName"] =

Where "myMapName" is yours map name that will be used when creating charts. Next, you will be loading a local .js file, so you should add in tsconfig.json in your app allowJs: true:

...
"compilerOptions": {
    "allowJs": true,
    ...

The map is ready to be imported to your app.

import * as Highcharts from 'highcharts/highmaps';
import * as HC_myMap from './relative-path-to-the-map-file/map-file-name';
HC_myMap(Highcharts);

Where relative-path-to-the-map-file should be relative (for the module importing the map) path to the map file and map-file-name should be the name of the map file.