ngx-build-plus
Extend the Angular CLI's default build behavior without ejecting, enabling custom webpack configurations and single-bundle builds.
What is ngx-build-plus?
ngx-build-plus is a builder for Angular CLI that allows developers to customize and extend the default build process without ejecting from the CLI's standard configuration. It provides a flexible way to modify webpack configurations, making it particularly useful for advanced scenarios like building Angular Elements or implementing custom build optimizations.
Angular developers who need to customize their build configuration (e.g., for Angular Elements, custom webpack plugins, or single-bundle outputs) but want to avoid ejecting from the Angular CLI.
Developers choose ngx-build-plus because it bridges the gap between the simplicity of the Angular CLI and the flexibility of advanced webpack configurations, allowing partial customizations without managing the entire build setup.
Overview
Extend the Angular CLI's default build behavior without ejecting, e. g. for Angular Elements
Use Cases
Best For
- Building Angular Elements that require a single consolidated output bundle.
- Extending Angular CLI builds with custom webpack plugins or partial configurations.
- Implementing custom build optimizations or environment-specific configurations without ejecting.
- Sharing dependencies as externals across multiple bundles in advanced Angular applications.
- Adding global constants or polyfills via webpack during the build process.
- Using different webpack merging strategies for complex project setups.
Not Ideal For
- Teams using Angular CLI's native build customization features that have matured in recent versions, reducing the need for third-party extensions.
- Projects where developers lack webpack expertise, as ngx-build-plus requires understanding webpack configuration for effective use.
- Applications focused on modern micro-frontends using Webpack Module Federation, as the README notes externals are deprecated and recommends alternatives.
- Simple Angular apps with standard build pipelines that don't require advanced webpack tweaks or single-bundle outputs.
Pros & Cons
Pros
Maintains Angular CLI's convenience by allowing custom webpack configurations without ejecting, preserving access to CLI updates and tools as highlighted in the README's philosophy.
Enables extending the default build with only additional webpack settings, reducing complexity compared to full custom configs, as demonstrated in the 'Getting started' example.
Supports consolidated outputs via the --single-bundle flag, which is specifically useful for scenarios like Angular Elements where a single file is required.
Provides schematics for tasks like adding webpack externals or polyfills, automating advanced setups and reducing manual configuration errors.
Cons
Requires strict version matching with Angular CLI (e.g., Angular 19 needs ngx-build-plus@^19.0.0), making upgrades cumbersome and error-prone without careful updates.
The README admits that webpack externals are no longer recommended for scenarios like Angular Elements, suggesting deprecated practices and lacking guidance on modern alternatives like Module Federation.
Users must understand webpack configuration to write partial configs or plugins, adding a steep learning curve beyond standard Angular CLI usage.
Frequently Asked Questions
Related Projects
angular-rspackThe Monorepo Platform that amplifies both developers and AI agents. Nx optimizes your builds, scales your CI, and fixes failed PRs automatically. Ship in half the time.
ng-packagrCompile and package Angular libraries in Angular Package Format (APF)
Angular BuildersAngular build facade extensions (Jest and custom webpack configuration)
Jest BuilderAngular build facade extensions (Jest and custom webpack configuration)
Found a gem we're missing?
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.