Configuring CommonJS Dependencies in angular.json

When building an Angular application, you may come across the need to use CommonJS modules from third-party packages. In order to properly configure these dependencies, you will need to make changes to the angular.json file.

Adding the Dependency

Firstly, install the desired CommonJS package using npm or yarn. Once installed, add the package to the "scripts" array in the angular.json file. For example, if you want to use the popular lodash library:

"scripts": [
  "node_modules/lodash/lodash.js"
]

Note that the path may need to be adjusted depending on the package and version you are using.

Configuring the Build Target

Next, you will need to modify the options object for the specific build target you are using. In the case of the default build target, this is located under "architect" > "build" > "options".

Here, you will need to add the following configuration:

"allowedCommonJsDependencies": [
  "lodash"
]

This tells the Angular compiler to allow the use of the lodash package during the build process.

Summary

To add a CommonJS dependency to your Angular application, you will need to:

1. Install the package using npm or yarn
2. Add the package to the "scripts" array in angular.json
3. Configure the "allowedCommonJsDependencies" option in the build target's options object

By properly configuring CommonJS dependencies in your Angular application, you can leverage the power of third-party packages and simplify your development workflow.