From 07b3e6a1b254575aea94b3243cb5098e42dc1c51 Mon Sep 17 00:00:00 2001 From: Tom Demulielr--Chevret Date: Thu, 18 Jan 2018 11:24:44 +0100 Subject: [PATCH 1/2] Add instruction to build with Angular CLI --- README.md | 35 +++++++++++++++++++++++++++++++++++ 1 file changed, 35 insertions(+) diff --git a/README.md b/README.md index 66711fe3494..9ac51ea5a1f 100644 --- a/README.md +++ b/README.md @@ -121,6 +121,41 @@ A repo that demonstrates how to build plotly.js with Webpack can be found [here] ... ``` +#### Building plotly.js with Angular CLI + +Currently Angular CLI use Webpack under the hood to bundle and build your Angular application. +Sadly it doesn't allow to override its Webpack config, and therefore to use the plugin mentioned in [Building plotly.js with Webpack](#building-plotly.js-with-webpack). +Without this plugin your build will fail when it tries to build glslify for GLSL plots. + +Currently 2 solutions exists to circumvent this issue : +1) If you need to use GLSL plots, you can create a Webpack config from your Angular CLI projet with [ng eject](https://github.com/angular/angular-cli/wiki/eject). +This will allow you to follow the instructions regarding Webpack. +2) If you don't need to use GLSL plots, you can make a custom build containing only the required modules for your plots. +The clean way to do it with Angular CLI is not the method described in [Modules](#modules) but the following : +```typescript +// in the Component you want to create a graph +import * as Plotly from 'plotly.js'; +``` + +```json +// in src/tsconfig.app.json +... + "compilerOptions": { + ... + "paths": { + "plotly.js": [ + // List here the modules you want to import + // this exemple is enough for scatter plots + "../node_modules/plotly.js/lib/core.js", + "../node_modules/plotly.js/lib/scatter.js" + ] + } + ... + } +... + +``` + ## Bugs and feature requests Have a bug or a feature request? Please first read the [issues guidelines](https://github.com/plotly/plotly.js/blob/master/CONTRIBUTING.md#opening-issues). From af048669d52a5e92e36f8283f4a06ccddc986fb3 Mon Sep 17 00:00:00 2001 From: Tom Demulielr--Chevret Date: Thu, 18 Jan 2018 11:30:41 +0100 Subject: [PATCH 2/2] Fix inter section link & json example --- README.md | 13 +++++-------- 1 file changed, 5 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index 9ac51ea5a1f..6f2f3c4fbb5 100644 --- a/README.md +++ b/README.md @@ -124,7 +124,7 @@ A repo that demonstrates how to build plotly.js with Webpack can be found [here] #### Building plotly.js with Angular CLI Currently Angular CLI use Webpack under the hood to bundle and build your Angular application. -Sadly it doesn't allow to override its Webpack config, and therefore to use the plugin mentioned in [Building plotly.js with Webpack](#building-plotly.js-with-webpack). +Sadly it doesn't allow to override its Webpack config, and therefore to use the plugin mentioned in [Building plotly.js with Webpack](#building-plotlyjs-with-webpack). Without this plugin your build will fail when it tries to build glslify for GLSL plots. Currently 2 solutions exists to circumvent this issue : @@ -139,21 +139,18 @@ import * as Plotly from 'plotly.js'; ```json // in src/tsconfig.app.json -... +// List here the modules you want to import +// this exemple is for scatter plots +{ "compilerOptions": { - ... "paths": { "plotly.js": [ - // List here the modules you want to import - // this exemple is enough for scatter plots "../node_modules/plotly.js/lib/core.js", "../node_modules/plotly.js/lib/scatter.js" ] } - ... } -... - +} ``` ## Bugs and feature requests