Because Angular uses webpack internally and restricts direct webpack configuration, you must use the @angular-builders/custom-webpack builder and ify-loader to correctly process plotly.js files.
Step 1: Install dependencies
Install the custom webpack builder and ify-loader (version 1.1.0 or higher):
npm install @angular-builders/custom-webpack ify-loader@^1.1.0
Step 2: Create a custom webpack configuration
Create a file named extra-webpack.config.js in the same directory as your angular.json. This configuration uses ify-loader to handle the .js files within the plotly.js node module.
const path = require('path');
module.exports = {
module: {
rules: [
{
test: /\.js$/,
include: [
path.resolve(__dirname, "node_modules/plotly.js")
],
loader: 'ify-loader'
}
]
},
};
Step 3: Update angular.json
Modify your angular.json to use the custom builder and point to your new configuration file. You must update the builder and the customWebpackConfig options for each project defined in your workspace.
Ensure projects.[PROJECT_NAME].architect.build.builder is set to @angular-builders/custom-webpack:browser and that customWebpackConfig is configured as shown below.
{
"projects": {
"MY_PROJECT_NAME": {
"architect": {
"build": {
"builder": "@angular-builders/custom-webpack:browser",
"options": {
"customWebpackConfig": {
"path": "./extra-webpack.config.js",
"replaceDuplicatePlugins": true,
"mergeStrategies": {"module.rules": "merge"}
}
}
}
}
}
}
}
