There is something wrong when use highcharts and highmaps at the same time

[elliottssu]

Description

angular2-highcharts is perfect operation with highcharts, but when i add highmaps modules as official method, it reports error, and it same to effect only one of highcharts and highmaps

How to reproduce

Generate an Angular CLI application, and add angular2-highcharts

Notes

if i just only use highcharts or highmaps alonely, it has no problem，but when use both of them,app run error.

systemjs.config.js

...
map: {
  ...
  'angular2-highcharts': 'node_modules/angular2-highcharts',
  'highcharts': 'node_modules/highcharts',
}
...
packages: {
  ...
  highcharts: {
    main: './highcharts.js',
    defaultExtension: 'js'
  },
  'angular2-highcharts': {
    main: './index.js',
    defaultExtension: 'js'
  }
}

app.module.js add highmaps module

import { ChartModule } from 'angular2-highcharts';

@NgModule({
    imports: [
       ···
        ChartModule.forRoot(
            require('highcharts'),
            require('highcharts/highmaps'),    //add hightmaps part
        ),
    ],

app.comporent.html use highcharts and highmaps at the same time

<!-- highcharts part -->
 <chart [options]="opt1"></chart> 

<!-- highmaps part -->
<chart type="Map" [options]="opt2"></chart>

error result

 Uncaught (in promise): Error: module is not a function

I suspect the problem is system.js loades two module ,so I'm wondering if you're using these two type chart at the same time, Is this error?

[elliottssu]

I have alreadly find a way to fix it
official advice add <script src="http://code.highcharts.com/maps/modules/map.js"></script>,if you want to use both of highcharts and highmap so just system.js change hightmap path

//system.js
'highcharts': 'npm:highcharts',
'highmaps':'npm:highcharts/modules/map.js',

//module.ts
ChartModule.forRoot(
            require('highcharts'),
            require('highmaps'),
        ),

[vmohir]

Your solution didn't solve my problem. I used this solution.