Compile and package Angular libraries in Angular Package Format (APF)
npm install ng-packagr-rollup-postcssbash
npm install -D ng-packagr
`
Usage Example
Let's walk through a _getting started_ that'll build an Angular library from TypeScript sources and create a distribution-ready npm package:
create a package.json file, add the custom ngPackage property, and eventually run ng-packagr -p package.json
– Here we go:
`json
{
"$schema": "./node_modules/ng-packagr/package.schema.json",
"name": "@my/foo",
"version": "1.0.0",
"ngPackage": {
"lib": {
"entryFile": "public_api.ts"
}
}
}
`
Note 1: Paths in the ngPackage section are resolved relative to the location of the package.json file.
In the above example, public_api.ts is the entry file to the library's sources and must be placed next to package.json (a sibling in the same folder).
Note 2: referencing the $schema enables JSON editing support (auto-completion for configuration) in IDEs like VSCode.
You can easily run _ng-packagr_ through a npm/yarn script:
`json
{
"scripts": {
"build": "ng-packagr -p package.json"
}
}
`
Now, execute the build with the following command:
`bash
$ yarn build
`
The build output is written to the dist folder, containing all those _binaries_ to meet the Angular Package Format specification.
You'll now be able to go ahead and npm publish dist your Angular library to the npm registry.
Do you like to publish more libraries?
Is your code living in a monorepo?
Create one package.json per npm package, run _ng-packagr_ for each!
Features
* :gift: Implements Angular Package Format
* :checkered_flag: Bundles your library in FESM2015 and UMD formats
* :school_satchel: npm package can be consumed by Angular CLI, Webpack, or SystemJS
* :dancer: Creates type definitions (.d.ts)
* :runner: Generates Ahead-of-Time metadata (.metadata.json)
* :trophy: Auto-discovers and bundles secondary entry points such as @my/foo, @my/foo/testing, @my/foo/bar
* :mag_right: Creates scoped and non-scoped packages for publishing to npm registry
* :surfer: Inlines Templates and Stylesheets
* :sparkles: CSS Features
* :camel: Runs SCSS preprocessor, supporting the relative ~ import syntax and custom include paths
* :snake: Runs Stylus preprocessor, resolves relative paths relative to ng-package.json
* :monkey: Adds vendor-specific prefixes w/ autoprefixer and browserslist — just tell your desired .browserslistrc`