I'm currently utilizing a package in an Angular project that can be found at the following link:
https://github.com/pablojim/highcharts-ng
One of the requirements for this package is that highcharts needs to be included as a global dependency by adding a script tag to your HTML like so:
<script src="http://code.highcharts.com/highcharts.src.js"></script>However, instead of directly inserting the script tag into my HTML file, I prefer to make it a global dependency via Webpack.
I've installed highcharts using npm and have attempted to use both the ProvidePlugin and noParse methods as detailed here (without success): https://webpack.js.org/guides/shimming/#scripts-loader
For the ProvidePlugin method, I tried:
new webpack.ProvidePlugin({
Highcharts: "highcharts",
})
and for noParse:
noParse: [
/[\/\\]node_modules[\/\\]highcharts[\/\\]highcharts\.js$/,
],
Unfortunately, neither of these approaches worked. This resulted in an error when highcharts-ng attempted to function because it was unable to instantiate a new Highcharts:
TypeError: Cannot read property 'Chart' of undefined
// from highcharts-ng which throws above error
chart = new Highcharts[chartType](mergedOptions, func);
Here is the angular module being used:
import angular from 'angular'
import highchartsNg from 'highcharts-ng'
import { ReportsData } from './reports.data'
import { reportsWidget } from './reports-widget/component'
export const ReportsModule = angular
.module('reports', [
highchartsNg,
])
.factory('ReportsData', ReportsData)
.component('reportsWidget', reportsWidget)
.name
And here is my webpack configuration:
var webpack = require('webpack')
module.exports = {
context: __dirname + '/app/modules',
entry: {
vendor: ['angular', 'highcharts-ng'],
modules: './modules.js',
},
output: {
path: __dirname + '/.tmp/modules',
filename: '[name].bundle.js',
},
plugins: [
// info: https://webpack.js.org/guides/code-splitting-libraries/
new webpack.optimize.CommonsChunkPlugin({
name: ['vendor', 'manifest'],
}),
],
module: {
rules: [
{
test: /\.js$/,
use: [
{
loader: 'babel-loader',
options: { presets: ['es2015'] },
},
],
},
],
},
}