Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Creating Libraries in Angular

Nishu Goel
September 14, 2019

Creating Libraries in Angular

Nishu Goel

September 14, 2019
Tweet

More Decks by Nishu Goel

Other Decks in Technology

Transcript

  1. Creating Libraries in Angular Nishu Goel Developer, UI Garage, IBM

    Blog: https://nishugoel.wordpress.com/ Twitter: @Dcoustawilson
  2. AGENDA • Overview of Libraries • Behind the scenes •

    Creating a library and using it locally • Importing your library in some Angular application • Publishing your library to npm
  3. In his talk, Create and publish Angular libs like a

    Pro , Juri Strumpflohner explains the need for a library with this image. Explains how our applications comprise of different javascript files and other external libraries and tools and how they are assembled together.
  4. • Inlining all the templates • Compiling it with ‘ngc’

    • Build formats: - ESM2015 (ES6) - ESM5 (combination of ES5 and imports, export from ES6) - UMD formats (combination of AMD and Common JS)
  5. ng-packagr created by David Herges, allows libraries to be built

    and packaged using a single command • Creates libraries in the Angular package format • Creates all the bundles (ESM2015, ESM5, UMD) • Creates type definitions (.d.ts) • Creates Ahead-of-Time metadata file • Also, inlines all the styles and templates!
  6. Import and use in a separate application locally • npm

    install – npm install <path> • npm link – npm link <path> • npm pack – npm pack
  7. Publishing • Login to npm • Give a version and

    name (read about versioning here: https://semver.org) • Publish with access flag ‘public’
  8. Some great resources to follow! • angular.io/guide/using-libraries • The Angular

    Library series: Angular In Depth • Structuring Angular Applications with Angular libraries – Fabian Gosebrink • ng-be 2017 talk Create and publish Angular libs like a Pro - Juri Strumpflohner