Working with libraries

What are the angular libraries?

A library is a collection of components, services, directives etc. that can be shared across different Angular projects. A library doesn't generate index.html, styles.css, polyfills.ts, main.ts. These files are specific to deploying an application in the browser. Since a library is simply a collection of reusable components, it doesn't need these files.

If you have developed functionality that is suitable for reuse, you can create your libraries. These libraries can be used locally in your workspace, or you can publish them as npm packages to share with other projects or other Angular developers.

#Prerequisites

• Node installed on your machine
• NPM installed on your machine
• Basic Knowledge of JavaScript
• Installing Angular CLI : npm install -g @angular/cli

Why should we use it?

It will enhance code reusability. We can import libraries in multiple Apps. It will avoid various bad practices or architectural mistakes and that can make it difficult to reuse code in the future.

Libraries extend Angular's base features.We can use default libraries like reactive forms to application then import the ReactiveFormsModule from the @angular/forms library in your application code. Similarly, adding Angular Material is an example of a large, general-purpose library that provides sophisticated, reusable, and adaptable UI components.

We can create our own libraries and publish them using the npm package.

Following is the list of libraries

1. ng-bootstrap

    The ng-bootstrap library was built from the top down using TypeScript. It has dropped jQuery as a dependency, specifying Bootstrap’s CSS as its only other dependency. With most JavaScript components implemented, the library seems like a complete solution when using Bootstrap with Angular.

2. Angular Material

    Angular Material 2 is a components library created by the Angular team. It features a set of components implementing the Material Design specs, ranging from buttons to dialogs, bottom sheets, etc. It features fully customizable themes and a rich set of components that can be used to quickly build an application. Angular Material 2 comes with almost 40 components, with more components under development and four pre-built themes.

3. ngx-translate

    Building an application that supports multiple languages can be a serious struggle, especially for single-page applications. The ngx-translate is a great library for managing multiple languages in your Angular application. It provides services to load translations that can be used throughout the application. Translations can be defined and loaded using the TranslateService, and onChange listeners are also available for handling language changes within the application.

How can we use it in our Angular application?
In this article, we will cover steps to create a library and how to use it in multiple Apps.

Steps to create Angular libraries:

1. Create a library with below CLI commands:

• ng new my-library-workspace –create-application=false
• cd my-library-workspace
• ng generate library my-lib <library_name>

This ng generate library <library_name> command will generate library and it has component, module and service files.

2. Angular.json will get updated with projectType = library.

3. To make library code reusable you must define a public API for it. This “user layer” defines what is available to consumers of your library. public_api.ts plays this role in your code. Anything exported from this file is public and ready to reuse in different Angular Apps.

4. To build your library use the following command

–watch  It’ll be used to rebuild the library automatically on changes in the library.
while generating library, would be automatically set path of your library in  tsconfig.json file.

• ng build my-lib <library_name> --watch

Publish library in npm

 Use the Angular CLI and the npm package manager to build and publish your library as an npm package.

 If you have never published a package in npm before, you must create a user account (npm adduser).

• ng build common-utility-lib –prod
• cd dist/common-utility-lib
• npm adduser (run this command if you don’t have an account on npm)
• npm publish

For reference, I have published the library created here. You can install and access published library with below command :

• npm install common-utility-lib

Conclusion
Angular libraries are very much powerful and useful for code reusability. We can create our own libraries and publish them.