How import a module in Ionic 2 App

[fernandommota]

Hello guys,

I would like to import the module 'highcharts-more', i need use a polar chart (http://www.highcharts.com/demo/polar) in my Ionic 2 App.

declare var require: any;

const Highcharts = require('../../node_modules/highcharts/highcharts.src');
const HighchartsMore = require('../../node_modules/highcharts/highcharts-more.js');

HighchartsMore(Highcharts);

I have been try this code above, but not work's.

Regards

[raugaral]

Are you using StockChart? I have a error when try to use the StockChart type.

[fernandommota]

hello @raugaral for now not, but i probably will need this in future too.

[raugaral]

Hi @fernandommota, following this example https://github.com/gevgeny/angular2-webpack-starter-and-angular2-highcharts/blob/master/src/app/home/home.component.ts I have tried that:

import * as Highcharts from 'highcharts'; import * as HighchartsMore from 'highcharts/highcharts-more.js'; HighchartsMore(Highcharts);

but doesn't work for me ... a have this error http://www.highcharts.com/errors/17

[fernandommota]

Hi @raugaral i can't reproduce your example...

Only works the charts for me if a import CharModule in app.module.ts.

import { ChartModule } from 'angular2-highcharts';

[gevgeny]

@fernandommota did you try new v0.5.5 ? check out the readme

[webprofusion-chrisc]

The confusion here is that the ionic2 build config doesn't use 'require'. To do the same as the 'require' from the README (suggest adding an example section for Ionic 2):

app.module.ts:

import { ChartModule } from 'angular2-highcharts';
import * as highcharts from 'highcharts';
...
...
imports: [
    IonicModule.forRoot(MyApp),
    ChartModule.forRoot(highcharts)
  ]
...
..

[gevgeny]

@soundshed how does modules syntax looks like after compilation ES6 to ES5 in the ionic2 ?

[webprofusion-chrisc]

@gevgeny Ionic 2 uses TypeScript almost exclusively, then transpiles to es5 using es2015 modules. The ionic build process then uses Webpack with UglifyJS, so the modules are finally managed by webpack, they get translated to webpack_require in the output JS.

[gevgeny]

@soundshed Hm, so looks like you have require but TypeScript does not know about this. Try this:

  import { ChartModule } from 'angular2-highcharts';
+ declare var require: any;

  ...
  ...
  imports: [
      IonicModule.forRoot(MyApp),
      ChartModule.forRoot(require('highcharts'))
    ]
  ...

[webprofusion-chrisc]

@gevgeny I see, yes that works fine. Would the 'import' syntax work unmodified for all users then (not using 'require' at all)? Using 'require' in the middle of the code seems unusual.

[gevgeny]

agree about unusual. but it would not. There are some inconsistencies between webpack/systemjs/js/ts combinations of env and imports so i decided to leave the require syntax

[gevgeny]

can i close the issue ?

[gevgeny]

@soundshed @peterpeterparker does it work also for modules https://github.com/gevgeny/angular2-highcharts#add-highcharts-modules ?

[peterpeterparker]

@gevgeny @soundshed I withdraw my comment. Seems it works while debugging (ionic serve) but not when I want to build a proper app using aot

ionic build iOS --prod =>

[11:23:01] build prod failed: Error encountered resolving symbol values statically. Function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol AppModule in /project/src/app/app.module.ts, resolving symbol AppModule in /project/src/app/app.module.ts [11:23:01] ionic-app-script task: "build"

[webprofusion-chrisc]

I'm sure I've done a prod release already that worked. What version of app-scripts and ionic cli are you on (ionic info)?

[peterpeterparker]

@soundshed here the informations.

Your system information:

Cordova CLI: 6.5.0 Ionic Framework Version: 2.0.1 Ionic CLI Version: 2.2.1 Ionic App Lib Version: 2.2.0 Ionic App Scripts Version: 1.0.0 ios-deploy version: 1.9.0 ios-sim version: 5.0.13 OS: macOS Sierra Node Version: v7.2.1

[peterpeterparker]

@gevgeny @soundshed I had a try, again, but could find a way. I've the feeling that I should provide my own HighchartsStatic new object because the prod compiler doesn't accept the static reference, but didn't find a way. I think I should achieve something like

Pseudo-code:

export function myExportHighchartsStaticLoader() {
    return HighchartsStatic());
 }

...
   ChartModule.forRoot(myExportHighchartsStaticLoader)

I'm using es2015

[webprofusion-chrisc]

@peterpeterparker ah, so you must have your own custom build process (Ionic defaults to typescript)? Are you using rollup or webpack? Rollup generally needs added config to tell it about classic js libraries where the exports aren't clear. Webpack probably does too, but using typescript means you get the type definition for the modules (and the export definitions).

[peterpeterparker]

@soundshed I don't have a custom build process, just standard Ionic rollup typescript build.

I just tried following solution described by @fr4ngus https://github.com/gevgeny/angular2-highcharts/issues/156 and it worked just fine, bot "ionic serve" and "ionic build ios --prod" + debug in the simulator where successful with a pie chart

[webprofusion-chrisc]

@peterpeterparker thank, yes I hadn't done a prod build after all! The hybrid approach (avoiding the 'require' var) I ended up with was:

..
..
import { HighchartsStatic } from 'angular2-highcharts/dist/HighchartsService';
import { ChartModule } from 'angular2-highcharts';
import * as highcharts from 'highcharts';
..
..
export function highchartsFactory() {
  return highcharts;
}
..
..

@NgModule({
..
...
  imports: [
    IonicModule.forRoot(MyApp),
    ChartModule
  ],
..
..
  providers: [
  ...
    {
      provide: HighchartsStatic,
      useFactory: highchartsFactory
    },

  ]
})

[fernandommota]

@gevgeny based in your description, my final solution:

import { ChartModule } from 'angular2-highcharts';
declare var require: any;

imports: [
    ChartModule.forRoot(
            require('highcharts')
           , require('../../node_modules/highcharts/highcharts-more.js')
    )

Thanks

[julioaze]

Hi guys. Even following the examples above, I can not get the activity gauge to work. Help me please!

Uncaught ReferenceError: Highcharts is not defined at highcharts-more.js:8 at highcharts-more.js:8

[julioaze]

Solve..

This is my solution

ChartModule.forRoot( require('highcharts'), require('../../node_modules/highcharts/highcharts-more.js'), require('../../node_modules/highcharts/solid-gauge.js') )

Thanks guys

[lujakob]

For me the following solution worked:

import {NgModule} from '@angular/core'; import {IonicPageModule} from 'ionic-angular'; import {MapPage} from './map'; import {ChartModule} from 'angular2-highcharts'; import * as highcharts from 'highcharts'; declare var require:any;

@NgModule({ declarations: [ MapPage, ], imports: [ ChartModule.forRoot( highcharts, require('highcharts/modules/map') ), IonicPageModule.forChild(MapPage) ], exports: [ MapPage ] }) export class MapPageModule { }