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.
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
besideangular.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"}
}
}
}
...