{"id":15361,"library":"ngx-build-plus","title":"ngx-build-plus","description":"ngx-build-plus is an Angular CLI extension that allows developers to customize the webpack build process without needing to \"eject\" the Angular application. It enables integration of custom webpack configurations or functions, offering a flexible way to modify how Angular projects are built and served. The current stable version is 20.0.0, tightly coupled to Angular CLI 20.x, ensuring compatibility with the latest Angular ecosystem. It typically releases new major versions in alignment with Angular's major releases. Key differentiators include its non-ejecting approach, support for `ng serve` and `ng build` parity, schematics for common advanced use cases like webpack externals, and options for building single bundles, useful for Angular Elements. It provides a simple API for merging partial webpack configurations or using a custom hook function to modify the default CLI webpack config.","status":"active","version":"20.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/manfredsteyer/ngx-build-plus","tags":["javascript","typescript"],"install":[{"cmd":"npm install ngx-build-plus","lang":"bash","label":"npm"},{"cmd":"yarn add ngx-build-plus","lang":"bash","label":"yarn"},{"cmd":"pnpm add ngx-build-plus","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required for Angular CLI schematics functionality during installation and project modification.","package":"@schematics/angular","optional":false},{"reason":"Extends Angular's default build tooling; ngx-build-plus replaces and enhances this builder.","package":"@angular-devkit/build-angular","optional":false},{"reason":"Common Angular dependency, likely used internally by schematics and build tooling.","package":"rxjs","optional":false}],"imports":[{"note":"ngx-build-plus replaces the default Angular CLI builders (e.g., 'browser', 'dev-server', 'karma') in `angular.json` to inject its custom capabilities.","wrong":"In angular.json: \"builder\": \"@angular-devkit/build-angular:browser\"","symbol":"Builder Configuration","correct":"In angular.json: \"builder\": \"ngx-build-plus:browser\""},{"note":"Used within custom `webpack.partial.js` or similar configuration files to access the webpack API for plugins or configuration. These files are typically CommonJS modules.","symbol":"webpack module","correct":"const webpack = require('webpack');"},{"note":"References a JavaScript file that exports a function, specified in the `angular.json` builder options, allowing programmatic modification of the webpack configuration.","symbol":"Config Hook Function","correct":"In angular.json options: \"configHook\": \"path/to/my-webpack-hook.js\""}],"quickstart":{"code":"const webpack = require('webpack');\n\nmodule.exports = {\n    plugins: [\n        new webpack.DefinePlugin({\n            \"VERSION\": JSON.stringify(\"4711\")\n        })\n    ]\n};\n\n// src/app/app.component.ts\nimport { Component } from '@angular/core';\n\ndeclare const VERSION: string; // Declare global variable defined by webpack\n\n@Component({\n    selector: 'app-root',\n    template: `<h1>{{ title }}</h1>`,\n    styles: ['h1 { color: blue; }']\n})\nexport class AppComponent {\n    title = 'Version: ' + VERSION;\n}\n","lang":"typescript","description":"Demonstrates how to add ngx-build-plus, create a partial webpack configuration (`webpack.partial.js`) to define a global `VERSION` constant, integrate it into an `app.component.ts`, and apply it to an Angular project via `ng serve --extra-webpack-config webpack.partial.js -o` after running `ng add ngx-build-plus`."},"warnings":[{"fix":"Explicitly set `--single-bundle=true` or `--single-bundle=false` when running `ng build` to maintain desired bundling behavior after upgrading.","message":"The `single-bundle` switch default behavior changed from `true` to `false` in version 7. This aligns `ngx-build-plus` with the Angular CLI's default multi-bundle behavior.","severity":"breaking","affected_versions":">=7.0.0"},{"fix":"If you relied on polyfills or styles being removed by default, you must now explicitly set `--keepPolyfills=false` or `--keepStyles=false`.","message":"The `--keepPolyfills` and `--keepStyles` options now default to `true` since version 9. This change was introduced to avoid confusion and ensure polyfills and styles are retained by default.","severity":"breaking","affected_versions":">=9.0.0"},{"fix":"Refer to the `ngx-build-plus` README or `npm` registry for the correct version mapping. Use `ng update ngx-build-plus` to upgrade gracefully.","message":"ngx-build-plus is tightly coupled to Angular CLI and Angular versions. Always ensure you install the `ngx-build-plus` version that matches your project's Angular/CLI major version (e.g., ngx-build-plus@^20 for Angular 20).","severity":"gotcha","affected_versions":">=6.0.0"},{"fix":"Avoid manual `npm install ngx-build-plus` followed by manual `angular.json` edits, as this can lead to misconfigurations. If manual installation was done, ensure `angular.json` builder entries are correctly updated.","message":"The recommended way to install and configure ngx-build-plus is by using `ng add ngx-build-plus`. This command automatically updates your `angular.json` to use the custom builders.","severity":"gotcha","affected_versions":">=7.2.0"},{"fix":"Always include `--extra-webpack-config path/to/webpack.partial.js` in your `ng build` or `ng serve` commands, or define it in a `package.json` script, to ensure your custom webpack logic is applied.","message":"Custom webpack configurations specified via `--extra-webpack-config` are only applied if the flag is explicitly provided during `ng build` or `ng serve`.","severity":"gotcha","affected_versions":">=6.0.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Run `ng add ngx-build-plus` in your project root to automatically update `angular.json` and install the package. Ensure the `--project` flag is used if targeting a sub-project.","cause":"The `angular.json` file is not correctly configured to use `ngx-build-plus` builders, likely due to a failed or incomplete installation.","error":"NG8002: Unknown builder 'ngx-build-plus:browser'."},{"fix":"Install `webpack` as a development dependency: `npm install webpack --save-dev` or `yarn add webpack --dev`.","cause":"Your `webpack.partial.js` or custom config hook tries to `require('webpack')` but `webpack` is not installed as a direct dependency in your project.","error":"Error: Cannot find module 'webpack' when running ng build/serve with --extra-webpack-config."},{"fix":"Verify the path to your `webpack.partial.js` (or similar) file is correct and that the file exports a standard webpack configuration object. Check for typos in the file path or name.","cause":"The path provided to the `--extra-webpack-config` flag is incorrect, the file does not exist, or the file is malformed (e.g., not exporting a valid webpack configuration object).","error":"Schema validation failed for the 'extra-webpack-config' option. Value \"path/to/non-existent-config.js\" is not a valid path."},{"fix":"Explicitly set the affected option in your `angular.json` builder options or via the CLI flag (e.g., `--single-bundle=true`, `--keepPolyfills=false`) to enforce the desired behavior, overriding the new defaults.","cause":"The default behavior of these options changed in major versions (e.g., `single-bundle` in v7, `keepPolyfills`/`keepStyles` in v9).","error":"The `single-bundle` option (or `keepPolyfills`, `keepStyles`) is not producing the expected output after upgrade."}],"ecosystem":"npm"}