Updated: Mar 14, 2024

Angular Package Format (APF) and how to use ng-package.json?

Overview of Angular Package Format (APF)

Angular Package Format (APF) is the structure and format of the Angular framework packages currently available on npm. This format applies to packages distributing Angular components (like Angular Material) as well as the core framework packages published under the @angular namespace, such as @angular/core and @angular/forms.

Angular Package Format (APF) is a standardized format for packaging and distributing Angular libraries. APF is designed to simplify the process of creating and sharing Angular libraries by defining a consistent structure and set of conventions for packaging and distributing Angular code.

One of the key components of APF is the ng-package.json file. This file is used to configure the build process for an Angular library and define the package metadata. The ng-package.json file includes several configuration options, including the entry point for the library, the output format (UMD, ES2015, etc.), and the package metadata (name, version, author, etc.).

To use ng-package.json, you first need to create a new Angular library using the Angular CLI. Once you have created the library, you can add an ng-package.json file to the root directory of your library. You can then configure the ng-package.json file to define the build process and define the package metadata for your library.

Once you have configured the ng-package.json file, you can build your library using the ng-packagr command-line tool. This tool will use the settings defined in the ng-package.json file to build your library and create a distribution package that can be published to NPM or another package registry.

Why need a package format like Angular Package Format (APF) for Angular projects?

In today’s JavaScript landscape, developers will consume packages in many different ways. For example, some may use SystemJS, others could use Webpack. Still, others might consume packages in Node or maybe in the browser as a UMD bundle or through global variable access.

The Angular distribution package supports all of the commonly used development tools and workflows, and adds emphasis on optimizations that result either in smaller application payload size or faster development iteration cycle (build time).