Going to a library with Angular

Table of contents

Reading Time: 5 minutes

Hi! Today we are going to learn how to create a library in angular and import that in other angular applications.

Prerequisites

Basic knowledge of angular
Node and NPM set up in the system

First clear out the Common thoughts

What are Angular Libraries?

An angular 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. It is a shareable code which provides Reusable functionality.

Why do 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.

Certain solutions are complex in nature and recreating them everywhere we need it, is heck of a job. That’s why its better to create such complex solutions as libraries to reuse with ease.

That’s why libraries are important and angular embraces this functionality. Look at some of the angular core libraries like RXJS that are imported as a library in angular and we know how important RXJS is in the angular world. Just imagine if we didn’t have the RXJS as a library but instead, we had some functions in some documentation, and in order to use it, we have to copy-paste those functions into every component and angular application we create. That would be troublesome and hard to maintain.

Behind the scenes: ng-packagr

Angular has a compiling component name packagr whose only job is to maintain the integrity between the angular apps that import angular libraries. We create angular libraries with the different angular core versions and these libraries are imported into different angular apps that may or may not be based on the latest angular version. Some apps may be based on the latest angular 10 but some apps might be based on version 4 or 5. So, how does a library created with version 10 can work with an app based on version 5. For this, angular has a pretty build tool that specific to libraries as it packages them into a certain format that’s compatible with any version of angular (not any, just the ones that are supported).

The tool name is ng-packagr which is used to compile and package a Typescript library to angular package format. This packagr makes sure 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 into other angular apps.

Current guideline – https://docs.google.com/document/d/1CZC2rcpxffTDfRDs6p1cfbmKNLA6x5O-NtkJglDaBVs/preview

Let’s code!!

Creating angular workspace without application

Hit this command in your terminal, opened up where you want to have the directory –

ng new <workspace-name> --create-application=false

This command creates a mono repo structure for angular workspace. Mono repo structure refers to a structure that not only contains one project but many. These structures are suitable for the applications that divided into several projects but are correlated to each other. For example, a UI whose navbar is a separate project, whose sidebar is a separate project, and further too. Each visual element dynamic element is separately handled in a different project with free choice of using any dev dependencies. These kinds of front-ends are also known as micro front-ends.

With mono repo, we will have the angular library and library consumer app in the same workspace.

Hit the below command, inside the created directory

ng generate library <library-name>

Using the angular library in the angular app

There are two ways to use the generated library in the angular applications, first is to use the library as local which means the angular library will be accessible inside the workspace in which the library is generated, this is suitable for mono repo apps that have different libraries being used in different apps but are not accessible outside the mono repo structure. For this, we need to have an angular application in the same workspace as of the angular library. Let’s do that –

ng g application <application-name>

Now we just need to import the module in the root module of the consumer angular application we just created and voila the angular library will be running.

To run the specific project in the mono repo angular workspace, hit this command –

ng s --open --project <app-name>

Second is to publish the library to the npm repository so that all the developers in the world can use the angular library contributing to open source. For this, 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.

Building the library

Hit this command in the mono repo workspace –

ng build <library name> --prod

–prod flag is important if you want to publish the library onto the public npm repository.

An NPM account is mandatory for publishing any angular library package or any other package to NPM repository.

To publish the angular library to the public npm repository, first hit this –

npm login

Then go to this directory dist/<library-name> inside the workspace in the terminal.

Inside the compiled directory of the angular library, hit this –

npm publish --access=public

Make sure that your library name is unique, otherwise it will throw an error.

This will publish your library to the NPM repository.

Takeaways –

How to create an angular library
What are mono repositories and when to use them?
Publishing an angular library to the npm repository

That’s all for now folks. I hope you have learned something from this blog. If you liked it then please hit the thumbs up and share it with your friends, family or colleagues. Also, please help me improve by giving healthy feedback (below comments). Follow me to get updates on more interesting blogs.

For more angular related topics visit – https://blog.knoldus.com/category/tech-blogs/Angular/