ng-packagr
Compile and package Angular libraries in Angular Package Format (APF) for distribution.
What is ng-packagr?
ng-packagr is a build tool that compiles and packages Angular libraries into the Angular Package Format (APF), ensuring they are ready for distribution and consumption by modern tooling. It streamlines the process of creating npm packages from TypeScript sources, making it easier for developers to share reusable Angular components and modules.
Angular developers and teams who need to create, package, and publish reusable Angular libraries as npm packages. This includes library authors, maintainers of design systems, and developers working in monorepos with multiple Angular packages.
Developers choose ng-packagr because it is the dedicated tool for implementing the official Angular Package Format specification, ensuring compatibility with Angular CLI, Webpack, and ESM bundlers. Its declarative configuration and support for secondary entrypoints simplify packaging for monorepos and complex library structures.
Overview
Compile and package Angular libraries in Angular Package Format (APF)
Use Cases
Best For
- Compiling Angular libraries into APF-compliant npm packages for distribution.
- Creating reusable Angular component libraries with inlined templates and styles.
- Packaging Angular libraries in monorepos with secondary entrypoints for sub-packages.
- Generating type definitions and FESM2022 bundles for modern tooling consumption.
- Preprocessing SCSS and adding vendor prefixes to CSS within Angular libraries.
- Building and publishing scoped npm packages from Angular TypeScript sources.
Not Ideal For
- Building non-Angular libraries or applications
- Projects requiring minimal or zero-configuration build tools
- Teams packaging libraries for environments not supporting ESM bundles
- Simple scripts or components that don't need full APF compliance
Pros & Cons
Pros
Implements the Angular Package Format specification, ensuring bundles like FESM2022 are compatible with Angular CLI, Webpack, and ESM bundlers, as highlighted in the features.
Supports SCSS with custom include paths and adds vendor prefixes, streamlining style handling without additional tools, as noted in the CSS features section.
Enables secondary entrypoints for sub-packages, facilitating complex library structures in monorepos, as described in the documentation.
Inlines templates and stylesheets and embeds assets in CSS, reducing runtime dependencies and improving performance, as mentioned in the asset features.
Cons
Only useful for Angular projects, making it unsuitable for multi-framework libraries or non-Angular ecosystems, limiting its versatility.
Requires a declarative ng-package.json file and understanding of APF, which can be cumbersome for simple or quick library setups, as seen in the usage example.
Built on RxJS and Angular Dependency Injection, adding a learning curve for developers not familiar with these technologies, as noted in the transformation pipeline documentation.
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.
ngx-build-plusExtend the Angular CLI's default build behavior without ejecting, e. g. for Angular Elements
Jest BuilderAngular build facade extensions (Jest and custom webpack configuration)
Angular BuildersAngular 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.