Errors with Rollup bundle - Chart is unknown chart type

[singhjusraj]

Hello,

Here is the repo with the problem.

The library plays fine as long as things are in JIT mode. As I switch from JIT to AoT and then try to generate a production build with rollup, first error comes up as

'ChartModule' is not exported by node_modules/angular2-highcharts/index.js (imported by app/app.module.js).

To get around this problem I've done following in my rollup-config.js

import rollup from 'rollup'
import nodeResolve from 'rollup-plugin-node-resolve'
import commonjs from 'rollup-plugin-commonjs';
import uglify from 'rollup-plugin-uglify'

//paths are relative to the execution path
export default {
    entry: 'app/main-aot.js',
    dest: 'aot/dist/build.js', // output a single application bundle
    sourceMap: false,
    format: 'iife',
    plugins: [
        nodeResolve({ jsnext: true, module: true }),
        commonjs({
            include: [
                'node_modules/rxjs/**',
                'node_modules/angular2-highcharts/**'
            ],
            namedExports: {
                'node_modules/angular2-highcharts/index.js': ['ChartModule']
            }
        }),
        uglify()
    ]
}

with those rollup configurations, I'm able to generate a rollup bundle.

But then when the project runs in browser, following error pops up

There is a similar issue #86 Any solutions offered there doesn't work

Do npm run build:aot and then npm run lite:aot to run the project.

[singhjusraj]

Any ETA to a fix on this one? If you need more input, please let me know Thanks

[jdcalkins]

@SinghSukhdeep I have the same problem. Have you found a solution yet?

[singhjusraj]

@jdcalkins no I haven't found any solution yet. Don't know much about the cause.

[beabri]

Any solutions?

I have the same issue, but with the Chart Type "gauge". I don't use angular-cli neither webpack, only using systemjs.config.js.

Here my app.module.ts:

import { ChartModule } from 'angular2-highcharts';

@NgModule({
  imports: [
    ChartModule.forRoot('highcharts'),
    ChartModule.forRoot('highcharts/highcharts-more'),
    ChartModule.forRoot('highcharts/modules/solid-gauge'),
  ]
})
export class AppModule {
}

And my sistemjs.config.js:

        packages: {
            highcharts: {
                main: './highcharts.js',
                defaultExtension: 'js'
            },
            'angular2-highcharts': {
                main: './index.js',
                defaultExtension: 'js'
            }            
        },
     resolve: {
      alias: {
        // NOTE: You should set 'highcharts/highcharts.src.js'
        // if you are not going to use <chart type="StockChart"
        highcharts$: "highcharts/highcharts-more.src.js"
      }

What am I missing?

[beabri]

UPDATE: it seems not to be a gauge error... it doesn't work always with the simplest highchart inside my Angular 2 app, it always gives me the following error:

Here my app.module.ts:

import { ChartModule } from 'angular2-highcharts';

@NgModule({
  imports: [
    ChartModule.forRoot('highcharts')
  ]
})
export class AppModule {
}

My sistemjs.config.js:

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

And, inside my component:

import { Component } from '@angular/core';
import { ChartModule } from 'angular2-highcharts';

@Component({
  selector: 'highchart',
  template: '<chart [options]="options">'
})

constructor() {
    this.options = {
        title : { text : 'angular2-highcharts example' },
        series: [{
            name: 's1',
            data: [2,3,5,8,13],
            allowPointSelect: true
        },{
            name: 's2',
            data: [-2,-3,-5,-8,-13],
            allowPointSelect: true
        }]
    };

    console.log(this.options);
} 
options: Object;

Any ideas? Thanks a lot.