Hands-on experience on how to create and use angular libraries in the angular apps and publish them to the NPM repository.

1. Presented By:
Shubhrank Rastogi
UI Consultant
Going to Library
with Angular

2. Lack of etiquette and manners is a huge turn off.
KnolX Etiquettes
Punctuality
Respect Knolx session
timings, you are requested
not to join sessions after a 5
minutes threshold post the
session start time.
Feedback
Make sure to submit a
constructive feedback for all
sessions as it is very helpful
for the presenter.
Silent Mode
Keep your mobile devices in
silent mode, feel free to
move out of session in case
you need to attend an urgent
call.
Avoid Disturbance
Avoid unwanted chit chat
during the session.

3. Agenda
01
● What are Angular Libraries?
● Why we need a Library?
● Behind the scenes : ng-packagr
● Creating a Library
● Using a library in local Angular App
● Publishing Library to local npm
● Publishing Library to Public npm repository

4. What are Angular Libraries?
● A library is a collection of components, services, directives, etc. that can be shared
across different Angular projects.
● More precisely, in programming, the Library is a collection of precompiled
routines that a program can use.
● An Angular library cannot run on its own. It must be imported as a package in an
angular application.
● An Angular library is a shareable code which provides Reusable functionality.

5. Why we need a Library?
● Many applications need to solve the same general problems, such as presenting a unified user interface,
presenting data, and allowing data entry.
● We as developers can create general solutions for particular domains that can be adapted for re-use in
different apps.
● These solutions can be used locally in your workspace, or you can publish them as npm packages to share with
other projects or with other Angular developers across the globe.

6. Behind the scenes : ng-packagr
● ng-packagr is a node library that can compile and package a TypeScript library to Angular Package Format.
● This packagr make sures that what we want to reuse in other angular apps must follow certain guidelines/rules
● These guidelines are Angular Package Format - a set of instructions that make sure whatever you are
packaging will be able to integrate in other angular apps.
● Docs - https://docs.google.com/document/d/1CZC2rcpxffTDfRDs6p1cfbmKNLA6x5O-NtkJglDaBVs/preview

7. Any Questions?

8. Creating a Library
● Before putting your hands in dirt please make sure that you have angular-cli installed as global
● To create a library we have a very simple command as below:
ng generate library <library-name>
● But, before excuting the above command let’s create a mono-repo angular worksapce
ng new <workspace-name> --create-application=false
● With mono-repo structure (multi-project) we will have library and library consumer application in the same
workspace

9. Using the library in local Angular App
● Let’s create a consumer application in the same workspace
ng generate application <application-name>
● We can now utilise the created library in our consumer application
● For this we just need to import the library to root NgModule of the consumer application
● This library is only accessible in the current workspace, outside this it won’t work

10. Publishing Library to local npm
● We need to build this library as an npm package and then we can publish it to the local node package manager
registry so that we can use it in any angular projects which are in our local machine.
● Follow these steps -
○ Create build of the library without PROD flag
ng build <library-name>
○ Create a pack file of the library (tarball)
cd dist/<library-name> && npm pack

11. Publishing Library to Public npm repository
● For this we need to have an NPM account
npm login
● For publishing the library to NPM global repo just hit this command from inside the library dist directory
npm publish --access=public
● Make note of the naming conventions for the NPM packages

12. Any Questions?

13. REFERENCES:
● https://angular.io/guide/creating-libraries
● https://www.npmjs.com/package/ng-packagr
● https://docs.npmjs.com/packages-and-modules/
● https://medium.com/@tomsu/how-to-build-a-library-for-angular-apps-4f9b38b0ed11
● https://medium.com/angular-in-depth/creating-a-library-in-angular-6-part-2-6e2bc1e14121
● https://medium.com/@michael.karen/angular-library-tutorial-46a7e1b129b3

14. Thank You :)
www.knoldus.com
hello@knoldus.com
@Knolspeak
Stay in Touch