Repository files navigation

Compile and package Angular libraries in Angular Package Format (APF)

npm install -D ng-packagr

Let's walk through agetting started that'll build an Angular library from TypeScript sources and create a distribution-ready npm package:create ang-package.json file and runng-packagr -p ng-package.json– Here we go:

{"$schema":"./node_modules/ng-packagr/ng-package.schema.json",...}

You can easily runng-packagr through a npm/yarn script:

{"scripts": {"build":"ng-packagr -p ng-package.json"  }}

Now, execute the build with the following command:

$ yarn build

The build output is written to thedist folder, containing all thosebinaries to meet the Angular Package Format specification.You'll now be able to go ahead andnpm publish dist your Angular library to the npm registry.

Do you like to publish more libraries?Is your code living in a monorepo?Create onepackage.json per npm package, runng-packagr for each!

• 🎁 ImplementsAngular Package Format
  • 🏁 Bundles your library in FESM2022
  • 🎒 npm package can be consumed byAngular CLI,Webpack, or ESM Bundlers
  • 💃 Creates type definitions (.d.ts)
• 🔎 Createsscoped and non-scoped packages for publishing to npm registry
• 🏄 Inlines Templates and Stylesheets
• ✨ CSS Features
  • 🐫 RunsSCSS preprocessor, supporting custom include paths
  • 🐒 Adds vendor-specific prefixes
  • 🐯 Embed assets data

• Copy Assets
• Embed Assets in CSS
• Managing Dependencies
• Change the Entry File of a Library
• Change Configuration Locations
• Override tsconfig
• Use PostCSS
• Add Style Include Paths
• Package Secondary Entrypoints (sub packages)

Angular Package Format documentation

Packaging Angular Libraries - Jason Aden at Angular Mountain View Meetup (Jan 2018, 45min talk)

Create and publish Angular libs like a Pro - Juri Strumpflohner at NG-BE (Dec 2017, 30min talk)

Packaging Angular - Jason Aden at ng-conf 2017 (28min talk)

Create and publish Angular libs like a Pro - Juri Strumpflohner at ngVikings, this time demoing building Angular libraries with ng-packagr, with NX as well as Bazel (March 2018, 30min talk)

General contribution guidelines

If you like to submit a pull request, you'll find it helpful to take a look at theinitial design document where it all started.

To orchestrate the different tools, ng-packagr features acustom transformation pipeline. The transformation pipeline is built on top of RxJS and Angular Dependency Injection concepts.