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
Terminal execution of the command
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>
Library command output
#angular #web application #angular #angular-library #npm
