What is ng-packagr?
ng-packagr is a tool for building and packaging Angular libraries in a way that is compatible with the Angular Package Format (APF). It helps developers to create reusable Angular libraries that can be easily distributed and consumed by other Angular applications.
What are ng-packagr's main functionalities?
Library Packaging
This command packages an Angular library according to the configuration specified in the ng-package.json file. It compiles the TypeScript code, bundles the library, and generates metadata files.
ng-packagr -p ng-package.json
Configuration File
The ng-package.json file is used to configure the packaging process. It specifies the destination directory for the packaged library and the entry file for the library.
{
"$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
"dest": "dist/my-lib",
"lib": {
"entryFile": "src/public-api.ts"
}
}
Custom Build Steps
You can add custom build steps in your package.json file to automate the packaging process. This example shows how to add a build script that runs ng-packagr with the specified configuration file.
{
"scripts": {
"build": "ng-packagr -p ng-package.json"
}
}
Other packages similar to ng-packagr
ngx-build-plus
ngx-build-plus is an Angular CLI extension that allows for more advanced build customizations. It provides features like extending the Angular build process, adding custom webpack configurations, and more. Compared to ng-packagr, ngx-build-plus is more focused on extending and customizing the build process of Angular applications rather than packaging libraries.
angular-library-builder
angular-library-builder is another tool for building Angular libraries. It provides a simple and straightforward way to package Angular libraries, similar to ng-packagr. However, it may not support all the advanced features and configurations that ng-packagr offers.
ng-packagr
Compile and package a TypeScript library to Angular Package Format
Usage Example
Create a configuration file .ng-packagr.json
:
{
"src": "my-lib-source-folder",
"dest": "dist/my-lib",
"workingDirectory": ".ng_build",
"ngc": {
"tsconfig": "tsconfig.lib.json"
}
}
The tsconfig
file is located relative to the src
folder, e.g. in `my-lib-source-folder/tsconfig.lib.json´.
It must follow this conventions:
- In
"angularCompilerOptions"
:
- use
flatModuleId
and flatModuleOutFile
- set
"strictMetadataEmit": true
and "skipTemplateCodegen": true
- Has one single entry file to the library in
"files": []
- it's recommended to name it
src/public_api.ts
and set in combination with "flatModuleOutFile": "index"
(see above)
- In
"compilerOptions"
:
- must transpile to a real ES2015 bundle with
"target": "es2015"
and "module": "es2015"
(transformations to ES5 and legacy bundle formats are performed by the tool later)
{
"angularCompilerOptions": {
"annotateForClosureCompiler": true,
"flatModuleId": "@foo/bar",
"flatModuleOutFile": "index",
"skipTemplateCodegen": true,
"strictMetadataEmit": true
},
"buildOnSave": false,
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "",
"target": "es2015",
"module": "es2015",
"moduleResolution": "node",
"outDir": "src",
"declaration": true,
"sourceMap": true,
"inlineSources": true,
"skipLibCheck": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"typeRoots": [
"node_modules/@types"
],
"lib": [
"dom",
"es2015"
]
},
"exclude": [
"node_modules",
"dist",
"**/*.ngfactory.ts",
"**/*.shim.ts",
"**/*.spec.ts"
],
"files": [
"src/public_api.ts"
]
}
Knowledge