Including angular2-highchart 3rd party lib

[CristyTarantino]

1. OS? Windows 7, 8 or 10. Linux (which distribution). Mac OSX (Yosemite? El Capitan?)
   Mac OSX El Capitan
2. Versions. Please run ng --version. If there's nothing outputted, please
   run in a Terminal:
   node --version
   And paste the result here.

v5.11.1

1. Repro steps. Was this an app that wasn't created using the CLI? What change did you
   do on your code? etc.

I am trying to reproduce the following app http://plnkr.co/edit/JRvp68r9PpPTpx3Tj1tA?p=preview with angular-cli.
The problem is that I cannot seem to import highcharts/exporting and highcharts/exporting-csv as in the example.

1. The log given by the failure. Normally this include a stack trace and some
   more information.

By following your steps I get:

The Broccoli Plugin: [BroccoliTypeScriptCompiler] failed with:
Error: Typescript found the following errors:
/Users/tarantinom/Dev/nonsolus/tmp/broccoli_type_script_compiler-input_base_path-UKEw7rNd.tmp/0/src/app/+research/+purchasers/+trends/trends.component.ts (16, 30): Cannot find module 'highcharts/exporting'.
at BroccoliTypeScriptCompiler._doIncrementalBuild (/Users/tarantinom/Dev/nonsolus/node_modules/angular-cli/lib/broccoli/broccoli-typescript.js:115:19)
at BroccoliTypeScriptCompiler.build (/Users/tarantinom/Dev/nonsolus/node_modules/angular-cli/lib/broccoli/broccoli-typescript.js:43:10)
at /Users/tarantinom/Dev/nonsolus/node_modules/angular-cli/node_modules/broccoli-caching-writer/index.js:152:21
at lib$rsvp$$internal$$tryCatch (/Users/tarantinom/Dev/nonsolus/node_modules/angular-cli/node_modules/broccoli-caching-writer/node_modules/rsvp/dist/rsvp.js:1036:16)
at lib$rsvp$$internal$$invokeCallback (/Users/tarantinom/Dev/nonsolus/node_modules/angular-cli/node_modules/broccoli-caching-writer/node_modules/rsvp/dist/rsvp.js:1048:17)
at lib$rsvp$$internal$$publish (/Users/tarantinom/Dev/nonsolus/node_modules/angular-cli/node_modules/broccoli-caching-writer/node_modules/rsvp/dist/rsvp.js:1019:11)
at lib$rsvp$asap$$flush (/Users/tarantinom/Dev/nonsolus/node_modules/angular-cli/node_modules/broccoli-caching-writer/node_modules/rsvp/dist/rsvp.js:1198:9)
at _combinedTickCallback (internal/process/next_tick.js:67:7)
at process._tickCallback (internal/process/next_tick.js:98:9)

Could anybody help?

[JSMike]

This is a TypeScript issue, you need to set up the typings.

Highcharts has a typings file in the registry.

run this from your project root:

if your typings --version is 0.8.1

typings install --save --ambient highcharts/highstock

if your typings version is 1.0.0 or greater

typings install --save --global highcharts/highstock

[CristyTarantino]

Hi, thanks for your help.
The problem wasn't highcharts but it's modules. So you were right it was similar fix as for #999.

So in angular-cli-build I did:

return new Angular2App(defaults, {
    vendorNpmFiles: [
      ...,
      'highcharts/**/*.+(js|js.map)',
      'angular2-highcharts/**/*.+(js|js.map)',
      'moment/moment.js',
      'lodash/**/*.+(js|js.map)'
    ]
  });

So in system-config I did:

const map: any = {
  'angular2-highcharts': 'vendor/angular2-highcharts/dist',
  'highcharts/highstock.src': 'vendor/highcharts/highstock.js',
  'HighchartExporting': 'vendor/highcharts/modules/exporting.js',
  'HighchartCSVExporting': 'assets/js/export-csv.js'
};

const packages: any = {
  'highcharts': {
    format: 'cjs'
  },
  'angular2-highcharts': {
    main: 'index',
    format: 'cjs',
    defaultExtension: 'js'
  },
  'HighchartExporting': {
    defaultExtension: 'js',
    format: 'cjs'
  },
  'HighchartCSVExporting': {
    defaultExtension: 'js',
    format: 'cjs'
  },
};

In typings.d.ts:

declare module 'HighchartExporting' {
    var exportAs: any;
    export = exportAs;
}

declare module 'HighchartCSVExporting' {
    var exportAs: any;
    export = exportAs;
}

So I could then do in my directive:

import { CHART_DIRECTIVES } from 'angular2-highcharts';
import { Highcharts } from 'angular2-highcharts';

import * as HighchartExporting from 'HighchartExporting';
import * as HighchartCSVExporting from 'HighchartCSVExporting';

HighchartExporting(Highcharts);
HighchartCSVExporting(Highcharts);

Now the problem is that for some reason I get multiples exporting buttons... but I guess I need to figure that our. Thanks for your input.

[JSMike]

'../assets/*/.+(js|js.map)'

and

'HighchartCSVExporting': 'assets/js/export-csv.js'

Is that working as intended? I thought the vendorNpmFiles glob array was piped into dist/vendor, I'm not sure if your example would work as expected.

I still haven't played with that library, and I haven't seen your code, so I'm not sure what could be causing buttons duplication.

[CristyTarantino]

Hi yes sorry you don't need

'../assets/*/.+(js|js.map)'.

'HighchartCSVExporting': 'assets/js/export-csv.js' works if in src you have an asset folder...
Yes it works and yes it is intended. export-csv is a module of Highcharts which does not have an npm install.

[filipesilva]

Glad to know you got it sorted. Again thanks to @JSMike for helping out!

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}