Creating Libraries: How to Build a Library for Angular Apps?

Have you ever played with Legos? Imagine building a Lego structure. You have all the necessary bricks, but something's missing. Maybe you need a specific shape or piece that isn't available in the current set. But wait! You can actually create your custom brick to fill that gap and make your structure even more unique. 

Similar is the case when working with Angular; you might encounter situations where you need some reusable components, handy services, or specific functionalities that aren't readily available. But you can build your own Angular libraries to fill those gaps and even share them with the world. Sounds exciting, right? Think of it as a special Lego brick containing all the essential code you need, ready to use in your project. 

In this blog, I’ll take you through a step-by-step guide on creating, building, and using the Angular library.

What is Angular Library? 

A library is a collection of precompiled routines that a program can use. Similarly, Angular libraries serve as modular sets of code that enable the encapsulation and reuse of functionality across diverse Angular projects. If you want to create an Angular library, you need to follow specific steps to ensure it integrates seamlessly with other Angular applications. In other words, Angular libraries are crucial tools for developers seeking to enhance code organization, maintainability, and reusability in Angular projects.

Umair Zaffar - Medium

Angular 18, released in May 2024, offers a significant update for web developers.  A key feature is zoneless change detection, which improves performance by streamlining how Angular tracks changes in your application.  Angular 18 also comes with a new developer hub, Angular.dev, which is a centralized resource for documentation. Several features that were experimental in previous versions are now considered stable, including Material 3, Microsoft.net, deferrable views, Angular CLI, and built-in control flow. This means developers can confidently rely on them in their projects. 

For those working with server-side rendering (SSR), Angular 18 offers improvements like i18n hydration support and better debugging. This enhances the overall experience for developers and users of SSR applications. Learn more about this in our full stack developer online course. In addition, Angular 18 integrates with Firebase app hosting, simplifying deployment of dynamic Angular applications. This service streamlines management of various rendering complexities and offers seamless integration with other Firebase products. If you are looking to create Angular library, the latest update provides comprehensive tools and resources to get you started efficiently.

According to angular.io, here are some of the features worth mentioning are:

1. DEVELOP ACROSS ALL PLATFORMS

• Learn one way to build applications with Angular and reuse your code and abilities to build apps for any deployment target. For web, mobile web, native mobile, and native desktop.  

2. SPEED & PERFORMANCE

• Achieve the maximum speed possible on the Web Platform today, and take it further, via Web Workers and server-side rendering.
• Angular puts you in control over scalability. Meet huge data requirements by building data models on RxJS, Immutable.js, or another push model.

3. INCREDIBLE TOOLING

• Build features quickly with simple, declarative templates. Extend the template language with your own components and use a wide array of existing components.  
• Get immediate Angular-specific help and feedback with nearly every IDE and editor. All this comes together so you can focus on building amazing apps rather than trying to make the code work.

4. LOVED BY MILLIONS

• From prototype through global deployment, Angular delivers the productivity and scalable infrastructure that supports Google's largest applications.

Reusability with Angular Libraries

An Angular library acts like a pre-built code module, containing reusable components, services, or even entire functionalities. Unlike full applications, libraries can't run on their own. They can be imported and integrated into your projects.

Think of them as Lego sets for Angular.rgb(252, 252, 252);"> These libraries tackle challenges you'd face in any application—building user interfaces, presenting data, or handling user input. The Angular community and even the Angular team create these libraries, addressing those needs with well-tested and reusable solutions.

Building a library is as simple as creating a regular Angular project. Once done, you can publish it as an npm package. Popular examples include ReactiveFormsModule for building reactive forms, the service worker library for creating Progressive Web Apps (PWAs), and the ever-popular Angular Material library, which provides a vast collection of beautiful and adaptable UI components.

To advance your career in web development, enroll in a learning Web Development course.   

Creating a New Library in Angular

Let us build a Library in Angular App step-by-step:

Step 1: Install Node.js:

• Angular requires Node.js version 14.X.X or later. You can download it from Nodejs.org.
  • The latest Version is: node-v16.13.1-x64
• Install node.js once downloaded:

• Once you have installed Node.js on your system, open node.js command prompt.
• To check your version, run node -v in a terminal/console window.

Step 2: Use npm to Install Angular CLI

• Use the following command to install Angular CLI

npm install -g @angular/cli

Or

npm install -g @angular/cli@latest

Or

• Just go to Angular CLI official website Angular.io.
• You will see the whole cli command to create an Angular app. You need to run the first command to install Angular CLI. These steps are the same for Windows and Mac.

• To check Node and Angular CLI version, use ng --version command.

Step 3: Create an app called ngApp4Library

Syntax:

ng new app_name
C:\>ng new ngApp4Library

It asks for

Would you like to add Angular routing? Yes

Which stylesheet format would you like to use?

> CSS 

….

Step 4: Generate Library via CLI:

Syntax: for creating a Library

ng generate library <name> [options] ng g library <name> [options]

• Let us generate the required library: here we are going to create “my-lib” Library.
• Go to the app folder and install the required Library: “my-lib”:

ng generate library my-lb

• This will create a library project my-lib into our ngApp4library project.
• my-lib Library will contain library module, services, components, etc.

Step 5: Edit the library ts file: Give a functionality to your library

As you can see our library has its own module, service, and component. We can add more components, services, directives, pipes, and modules as per our needs.

The Library file that we need to edit is my-lib. It appears in the folder C:\Users\ISHU\Desktop -> ngApp4Library -> projects -> my-lib -> src -> lib. The file to be edited is:  my-lib.component.ts

Add the following code:

import { Component, OnInit } from '@angular/core';
@Component({
 selector: 'lib-my-lib',
 template: `
<form  method="post">
 <div >
   <label for = "username"> <b> Username: </b> </label>
   <input type = "text" placeholder = "Enter Username here" name = "username" style = "margin:10px;" required>
 <br/>
   <label for = "passwd"> <b> Password: </b> </label>
   <input type = "password" placeholder = "Enter Password here" name = "passwd" style = "margin:10px;" required>
 <br/>
    <button type = "submit"> Login </button>
</div>
</form>
 `,
 styles: [
 ]
})
export class MyLibComponent implements OnInit {
 constructor() { }
 ngOnInit(): void {
 }
}

Rebuilding an app using libraries

1. Before consuming the library, we need to build an Angular library.
2. Here we will build the library for local (same application) usage.
3. Then we will re-build the library for global (any application) usage.

Creating a New Library

1. Build the library and consume it in the same application:

• To build the library, we run the following command:

ng build <library name>

• Here our library name is my-lib, thus the command we need is: ng build my-lib

• The command will generate the library dist folder
• Next step is to implement the library into our current project: ngApp4Library:
• For this step, we need to import this library in our main app (ngApp4Library).
• In app.module.ts import my-lib library module as shown: app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { MyLibModule } from 'my-lib';
@NgModule({
 declarations: [
   AppComponent
 ],
 imports: [
   BrowserModule,
   AppRoutingModule,
   MyLibModule
 ],
 providers: [],
 bootstrap: [AppComponent]
})
export class AppModule { }

• Now, we simply add the my-lib library in the HTML file.
• Please note that the selector for the library used here is: lib-my-lib
• To know about the selector (lib-my-lib), we can check the file: ngApp4Library -> projects -> my-lib -> src -> lib->  my-lib.component.ts
• Now open and edit: app.component.html from the main App folder: ngApp4Library\src\app\ app.component.html: 

<lib-my-lib></lib-my-lib>

• Now we can start our application from the Node.js command line as: ng serve

• Open the favourite browser and type the default Angular app URL to check the output: localhost:4200/.

2. Rebuild the library and consume it from some other application:

We go through the following steps to implement the Library into another project:

• To Re-build the library, we run the following command:

ng build <library name>

• Here our library name is my-lib, thus the command we need is: ng build my-lib

• The command will generate the library dist folder
• Now, create a new Angular application: ngAppClient in a new command window. We need to let the library application run.

ng new ngAppClient

• Now from the build, check the paths destined as “to”

• Here, the “to” part gives us the value: C:\ Users\ ISHU\ Desktop\ ngApp4Library\ dist\ my-lib
• So, now copy this path: “C:\ Users\ ISHU\ Desktop\ ngApp4Library\ dist\ my-lib”
• Next, we open the terminal of ngAppClient project and install this library with the following command into the ngAppClient project: 
  • npm i C:\ Users\ ISHU\ Desktop\ ngApp4Library\ dist\ my-lib
  • C:\Users\ISHU\Desktop>cd ngAppClient
  • C:\Users\ISHU\Desktop\ngAppClient>npm i
  • C:\Users\ISHU\Desktop\ngApp4Library\dist\my-lib

• After installation of the library in the client application, we can import the library into the app.module.ts of the client app. After importing the library module, we can easily use those services, components, etc.
• To use the library:
  • Open Client Project -> app.module.ts file and edit it to add the library:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { MyLibModule } from 'my-lib';
@NgModule({
 declarations: [
   AppComponent
 ],
 imports: [
   BrowserModule,
   AppRoutingModule,
   MyLibModule
 ],
 providers: [],
 bootstrap: [AppComponent]
})
export class AppModule { }

• Now, we simply add the my-lib library in the client project app.component.html file.
• Please note that the selector for the library used here is: lib-my-lib
• To know about the selector (lib-my-lib), we can check the file: ngApp4Library -> projects -> my-lib -> src -> lib->  my-lib.component.ts
• And then open and edit: app.component.html from the client App folder: ngAppClient\ src\ app\ app.component.html:

<lib-my-lib></lib-my-lib>

• We can now start our client application for the Node.js command line as:

ng serve.

• In case the Library project is running in the default port, 4200, we can change the port of the client app to 5200 by the following command:

ng serve --port 5200

• Open your favorite browser and type the default Angular app URL to check the output: localhost:5200/.

Publishing your library

We publish the library to make the library available on npm. To create angular library and publish it, all we need to do is create a production build, and then run the npm publish command from the library project’s dist directory.

The Syntax is as follows:

ng build <library name> --prod
cd dist/<library name>
npm publish

Here the Library project is ngApp4library, and the library is my-lib, so we run the following commands:

ng build my-lib --prod
cd dist/my-lib
npm publish

If you have not published anything before, you will need to create an npm account first and log in into your npm account and then publish your library.

Looking to enhance your coding skills? Get certified in Python, the versatile programming language that powers everything from web development to data analysis. Join our Python course certification and unlock endless possibilities. Start your journey today!

The Purpose of Angular Libraries

Angular Libraries are very useful in case we want to re-use components, services, modules, etc. in our application. We just need to add the published library in our project, and that’s it, the components, modules, services, are all ready to be used in the application.

To create an Angular library, we generate it by “ng generate” command, built it by “ng build” command, publish by “npm publish” command. To use a library we install it by “ng i “ command.

Use Cases for Angular Libraries 

These libraries are essentially pre-built components, like windows and doors, that you can "plug and play" into your Angular applications. Instead of writing code from scratch, you can simply import existing libraries and use them immediately. To streamline your development process, you might want to create Angular library components tailored to your specific needs.

Angular libraries find applications in a variety of scenarios, offering benefits such as 

• Code Reusability: Share common components and services across multiple projects, reducing redundancy. In other words, think about all the common features used across different applications, like navigation bars, login forms, or fancy buttons. Instead of writing these features every time, you can store them in a library and reuse them across projects. It's like having a box of building blocks that you can easily assemble into different creations! 
• Maintainability: It helps to centralize code updates in the library, making it easier to manage and enhance functionality. Think of it this way, imagine updating a specific feature in multiple projects manually. Sounds like a nightmare, doesn't it? With libraries, you only need to update the code in one place, and the changes automatically apply across all projects using that library. It's like having a remote control for your house, where changing one setting affects all the lights at once! 
• Collaboration: Building software is often a team effort. By using shared libraries, everyone works with the same components and standards. This promotes consistency and it makes it simpler for different developers to collaborate on the same project. It's like having a shared language that everyone understands, making communication and teamwork quite easy! 

Here are a few real-world examples where Angular libraries can be beneficial. 

Example 1: If you're working on multiple Angular projects, and you want to maintain consistency in the UI components across these projects then you can create a shared UI components library. 

• Step 1: Library creation 
  • $ ng generate library shared-components 
• Step 2:  Library Usage (In Angular): 

Example 2: Imagine that you have multiple Angular projects that require authentication. You want to maintain a consistent authentication mechanism.  

• Step 1: Library creation 
  • $ ng generate library auth 
• Step 2: Library Implementation 
• Step 3: Library Usage (In Angular): 

Example 3: Let’s say that you want to create a reusable feature module for handling file uploads.  

• Step 1: Library creation:
  • $ ng generate library file-upload 
• Step 2: Library Implementation: 
• Step 3: Library Usage (In Angular): 

Conclusion 

In conclusion, the to create angular libraries and utilize them are instrumental in building scalable, maintainable, and collaborative projects. Using libraries doesn't just save time and effort; it also improves the quality of your code. Libraries are typically well-tested and documented, ensuring reliability and stability in your applications.  

This tutorial on how to create a library in Angular helps you with the knowledge to initiate, develop, build, and share Angular libraries effectively. Whether you're an experienced developer or just starting out, Angular Libraries will always be handy. They offer a powerful way to share code, improve maintainability, and make collaboration a breeze. You can embrace the power of Angular libraries to streamline your development process, enhance code quality, and contribute to the robust Angular ecosystem. Happy coding!

Unlock your potential with our free Software Development courses, designed to equip you with the skills and knowledge needed to excel in the tech world. Start learning today and advance your career!"

Master the most in-demand software development skills that employers are looking for. From coding languages to development frameworks, these skills will help you stand out in the tech industry.

Enhance your expertise with our comprehensive Software Engineering courses, designed to equip you with practical skills and knowledge to excel in the ever-evolving tech landscape.