A Comprehensive Guide to Creating Angular Libraries

Creating an Angular library is a valuable skill that allows you to encapsulate and share reusable components, services, and other code across multiple Angular applications. In this article, we'll walk through the steps to create an Angular library from scratch.

Prerequisites

Before you begin, make sure you have the following tools and technologies installed:

1. Node.js and npm: Ensure you have Node.js and npm (Node Package Manager) installed on your computer. You can download and install them from the official website: Node.js.
2. Angular CLI: You need Angular CLI to create and manage Angular projects. If it's not already installed, you can install it globally using npm: npm install -g @angular/cli .

Step 1. Create a New Angular Library Project

To create a new Angular Library, open your terminal and run the following command:

ng new my-library

Output

Note: Replace `my-library` with the name you want for your project. This command will create a new Angular project with the same name.

Next, open the project in your Visual Studio Code, and your Project will look like this,

In the terminal, create a library using the following command:

ng generate library test

Note: Replace `test` with the name you want for your library. This command will create a new Angular library with the same name.

This command will create a project folder and, within it, generate a library named 'test'.

Output

Step 2. Develop Your Library

Inside your library project directory, you can start building your library components, services, and any other code you want to include. Here are some key points to consider:

Components: Create Angular components within your library. You can use the Angular CLI to generate components just like in a regular Angular project:

ng generate component my-component --project test

Note: In the library, when creating a component, service, etc., you need to specify '--project <your lib name>.

Output

Export the component into the test module,

import { NgModule } from '@angular/core';
import { TestComponent } from './test.component';
import { MyComponentComponent } from './my-component/my-component.component';

@NgModule({
  declarations: [
    TestComponent,
    MyComponentComponent
  ],
  imports: [
  ],
  exports: [
    TestComponent,
    MyComponentComponent  // export here to make component available outside the module
  ]
})
export class TestModule { }

Open your 'my-component.component.html' file, create a heading tag, and write 'c-sharp-corner' inside the tag.

<h1>c-sharp-corner</h1>

Key Points

• Services: If your library requires services, create them using the Angular CLI or manually.
• Public API: Define the public API of your library in the public-api.ts file located in the src folder. This file exports the components, services, and other parts of your library that you want to make available to consumers.

public.api.ts

/*
 * Public API Surface of test
 */

export * from './lib/test.service';
export * from './lib/test.component';
export * from './lib/test.module';
export * from './lib/my-component/my-component.component';  // Export here like this to make it visible to other modules

Step 3. Build Your Library

To build your library, run the following command in your library project directory:

ng build test

Output

This command compiles your library code and generates a distributable version in the dist folder of your library project.

dist folder

Step 4. Publish Your Library (Optional not needed for learning purposes)

You can publish your library to npm if you want to make it available to others. To do this, you need to have an npm account. Here are the steps to publish your library:

• Log in to your npm account using the command line:

  npm login

• Navigate to the dist folder of your library project:

  cd dist/test

• Publish your library to npm:

  npm publish

Step 5. Using Your Library

Consumers can install and use your library in their Angular projects as follows:

• Install your library from npm: (Perform the following action only if you have published your library on npm. )

  npm install test

  Import and use the components and services in their Angular application.
• import the module in '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 { TestModule } from 'test';
  
  @NgModule({
    declarations: [
      AppComponent
    ],
    imports: [
      BrowserModule,
      AppRoutingModule,
      TestModule   // Import the module here
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  

• import the 'my-component' in to 'app.component.html'.

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

  Note: In a typical Angular project, selectors often start with 'app,' but inside a library, selectors typically start with 'lib.'
• Finally, run the following command in your terminal; it will automatically open and redirect to your default web browser to view the result.

  ng serve --open

Output

Extra Commands

During library development, use the 'ng build testlibrary --watch' command to instantly reflect changes in your browser. Please note that it will only reflect if you import your library into your application.

Conclusion

Creating an Angular library allows you to encapsulate and share reusable code with the Angular community. By following the steps outlined in this article, you can develop, build, and optionally publish your Angular library for others to use in their projects.