Angular Library- The complete developer guide

In this post, we will discuss about Angular library. We will start on how to create a library, its advantages and some really cool coding along with our journey on Angular library.

What we’re going to learn

1. What’s Angular library.
2. Prerequisite to create Angular library.
3. Creating an Angular library.
4. Add custom component to our library.
5. Publishing your library.
6. Closing thoughts.

Angular Library

We might have come across scenarios were an organization builds multiple applications and they might need a generic solution such as presenting a unified user interface, presenting data, and allowing data entry. For this, the developers could create a general solutions for particular domains that can be adapted for re-use in different applications. Such a solution can be built as Angular libraries and these libraries can be published and shared as npm packages.

Angular library is an Angular project that differs from a normal Angular application because it cannot run on its own. A library must be imported and used in an application. Angular libraries extend Angular’s base functionality.

For example, say our organization have several web applications to be made in near future and they have decided to have same user interfaces across all these application. In this scenario, we could create an Angular library with all the reusable codes and styling as part of the library. This may include, the theme, several custom controls (Input, single select, multi-select, auto suggest controls…), several reusable services, models, interfaces and much more.

Prerequisite to create Angular library

1. Node JS installed (Download link: https://nodejs.org/en/download/)
2. Angular CLI installed globally (npm command to install globally: npm install -g @angular/cli)

Creating Angular library

For creating Angular library , we could use Angular CLI to generate a new library skeleton in a new workspace.

We could follow the below steps:

1. Create a workspace

We create a workspace that is an Angular application, were we could create our angular library and test all the items which we are going to have as part of our library. For the this, we could use the CLI command ng new my-workspace to create our new Angular application and the go inside our project directory using the cmd command: cd my-workspace.

2. Create our library

For creating Angular library we could use CLI command: ng generate library transom --prefix=trans

With this we would get the library skeleton. And our folder structure would look like:

Angular Library basic skeleton

Here we could see the CLI is creating the basic folder structure for us with the below items:

1. transom.module.ts (Module)
2. transom.component.ts (Component)
3. transom.service.ts (Service)

In order to use these items in another application, we have to export these as part of the public-api.ts file:

public-api.ts

If we forgot to add our components, models or modules in this file, then we won’t be able to import and use in other applications. By default, the CLI will all do this to us. As and when we create a new component, module or service we have to export manually inpublic-api.ts.

To check the look and feel our component, we could use our work my-workspace Angular application. For that, import our TransomModule in our app.module.ts imports array. TransomModule is imported from projects/transom/src/public-api . Find the snippet below of app.module.ts below:

Now, replace the content in app.component.html and paste the snippet: <trans-transom></trans-transom> . Now run our Angular application using the command: npm run start . The application will start on http://localhost:4200. If we open in our browser, we could see something like:

Transom component loaded in my-workspace application

So, finally we created our Angular library and we used a component in our workspace application as well. Next we will see how add a new custom component and use them in our application.

Add a custom component

We will adding our new component inside the directory projects/transom/src/lib/ and create a new component using CLI command: ng g c custom and export the component in TransomModule & public-api.ts.

Import the new component in app.module.ts and use the selector (trans-custom) in app.component.html and reload the application again. It would look like:

Custom component used in my-workspace application

Publishing library

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

We should always build libraries for distribution using the production configuration. This ensures that generated output uses the appropriate optimizations and the correct package format for npm.

Use the below commands to publish our library:

ng build transom — prod
cd dist/transom
npm publish

Summary

Here I have just explained the basics on how to create a Angular library, create component as part of shared library and then used this in our workspace application. This was just for demonstration purpose and show how it works. As part of the next step, we could create a custom control (A custom Input control) as part of the library and use in application.

Thank you everyone for reading the article. I hope you enhanced your understanding of the interesting Angular library. Please support this article with your support to help it spread to a wider audience. I will be coming with a continuation of this Article with real world scenarios. Stay tuned and thank you 🙏🙏🙏.