ng-packagr/ng-packagr


Transpile component libraries to Angular Package Format. Part of Angular CLI.

http://ng-packagr.github.io/ng-packagr/

License: MIT

Language: TypeScript

Keywords: angular, angular-library, autoprefixer, browserslist, component-library, css, html, less, scss, stylus, typescript


ng-packagr

Transpile your libraries to Angular Package Format

npm npm License Conventional Commits CircleCI

GitHub contributors GitHub stars npm Downloads Renovate enabled

Credits

Contributors

This project exists thanks to all the people who contribute. [Contribute].

Installation

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:

{
  "$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:

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

Now, execute the build with the following command:

$ 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

  • 🎁 Implements Angular Package Format
    • 🏁 Bundles your library in FESM2015, FESM5, and UMD formats
    • πŸŽ’ npm package can be consumed by Angular CLI, Webpack, or SystemJS
    • πŸ’ƒ Creates type definitions (.d.ts)
    • πŸƒ Generates Ahead-of-Time metadata (.metadata.json)
    • πŸ† Auto-discovers and bundles secondary entry points such as @my/foo, @my/foo/testing, @my/foo/bar
  • πŸ”Ž Creates scoped and non-scoped packages for publishing to npm registry
  • πŸ„ Inlines Templates and Stylesheets
  • ✨ CSS Features
    • 🐫 Runs SCSS preprocessor, supporting the relative ~ import syntax and custom include paths
    • 🐘 Runs less preprocessor, supports the relative ~ import syntax
    • 🐍 Runs Stylus preprocessor, resolves relative paths relative to ng-package.json
    • πŸ’ Adds vendor-specific prefixes w/ autoprefixer and browserslist β€” just tell your desired .browserslistrc
    • 🐯 Embed assets data w/ postcss-url

How to…

Advanced Use Cases

Examples and Tutorials

A great step-by-step example of making an Angular CLI project with a library distributed separate from the app, by Jason Aden

Nikolas LeBlanc wrote a tutorial on building an Angular 4 Component Library with the Angular CLI and ng-packagr

Here is a demo repository showing ng-packagr and Angular CLI in action.

What about ng-packagr alongside Nx Workspace? Well, they work well together!

Further user questions and issue-driven documentation

We keep track of user questions in GitHub's issue tracker and try to build a documentation from it. Explore issues w/ label documentation.

Contributing to ng-packagr

General contribution guidelines

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

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

Knowledge

Angular Package Format v6.0, design document at Google Docs

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)

Juri Strumpflohner - Create and publish Angular libs like a Pro

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

Packaging Angular - Jason Aden

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)

Juri Strumpflohner - Create & Publish Angular Libs like a PRO at ngVikings

Project Statistics

Sourcerank 20
Repository Size 12.8 MB
Stars 1,387
Forks 200
Watchers 55
Open issues 164
Dependencies 1,880
Contributors 74
Tags 118
Created
Last updated
Last pushed

Top Contributors See all

David Herges Alan Agius renovate[bot] Renovate Bot David Parks greenkeeper[bot] Sibiraj Esteban Marin NoΓ«l MacΓ© David Enke Joost Koehoorn Patrik Johansson Matt Lewis ahmedGomaa90 Jordan Hall Aslan Vatsaev Abdellatif Ait boudad Filipe Silva Michael Wooten Ed Pelc

Packages Referencing this Repo

ng-packagr
Compile and package a TypeScript library to Angular Package Format
Latest release 5.5.1 - Updated - 1.39K stars
ng-compile
Compile and package a TypeScript library to Angular Package Format
Latest release 1.0.1 - Updated - 1.39K stars
ng-packagr-bkn
Compile and package a TypeScript library to Angular Package Format
Latest release 4.7.5 - Updated - 1.39K stars
ng4-packagr
Compile and package a TypeScript library to Angular Package Format
Latest release 1.7.4 - Updated - 1.39K stars
@crexi-dev/ng-packagr
Compile and package a TypeScript library to Angular Package Format
Latest release 5.2.10 - Updated - 1.39K stars
ng-packagr-dev
Compile and package a TypeScript library to Angular Package Format
Latest release 0.1.2 - Updated - 1.39K stars

Recent Tags See all

v5.5.1 September 14, 2019
v5.5.0 August 14, 2019
v5.4.3 July 29, 2019
v5.4.2 July 29, 2019
v5.4.1 July 29, 2019
v5.4.0 July 29, 2019
v5.3.0 June 05, 2019
v5.2.0 May 17, 2019
v5.1.0 April 15, 2019
v5.0.1 March 27, 2019
v5.0.0 March 27, 2019
v4.7.1 February 15, 2019
v4.7.0 January 26, 2019
v4.6.0 January 15, 2019
v4.5.0 January 11, 2019

Something wrong with this page? Make a suggestion

Last synced: 2019-09-14 09:52:53 UTC

Login to resync this repository