Alternative ways to require or build plotly.js

Depending on your needs you may require/import one of the distributed plotly.js packages or a plotly.js/lib index file and integrate it into your application.

The sections below provide additional info in respect to alternative building frameworks.

Browserify example

Given source file:

// file: index.js
var Plotly = require('plotly.js-dist-min');
// ....

then simply run

browserify index.js > bundle.js

Webpack

For plotly.js to build with Webpack you will need to install ify-loader@v1.1.0+ and add it to your webpack.config.json. This adds Browserify transform compatibility to Webpack which is necessary for some plotly.js dependencies.

A repo that demonstrates how to build plotly.js with Webpack can be found here. In short add ify-loader to the module section in your webpack.config.js:

...
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: 'ify-loader'
            }
        ]
    },
...

Angular CLI

Since Angular uses webpack under the hood and doesn't allow easily to change it's webpack configuration, there is some work needed using a custom-webpack builder to get things going.

Install @angular-builders/custom-webpack and ify-loader@v1.1.0+
Create a new extra-webpack.config.js beside angular.json.

extra-webpack.config.json

module.exports = {
    module: {
        rules: [
            {
                test: /\.js$/,
                include: [
                    path.resolve(__dirname, "node_modules/plotly.js")
                ],
                loader: 'ify-loader'
            }
        ]
    },
};

Change the builder in angular.json to "@angular-builders/custom-webpack:browser and configure it correctly to use our new webpack config.

angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "MY_PROJECT_NAME": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {
        "@schematics/angular:component": {
          "styleext": "scss"
        }
      },
      "architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            ....
            "customWebpackConfig": {
              "path": "./extra-webpack.config.js",
              "replaceDuplicatePlugins": true,
              "mergeStrategies": {"module.rules":  "merge"}
            }
          }
        }
...

It's important to set `projects.x.architect.build.builder` and `projects.x.architect.build.options.customWebpackConfig`. If you have more projects in your `angular.json` make sure to adjust their settings accordingly.

Uh oh!