How to Create an Angular Library and Publish it as NPM Pack

How to Create an Angular Library and Publish it as NPM Package

3 min read | Sep 10, 2025

When building large-scale Angular applications, you may develop reusable components, directives, or services that could benefit other projects. Instead of copying code between apps, you can package your functionality into an Angular library and publish it to npm for reuse and sharing.
In this article, we will go step by step to:

Create an Angular library
Build and test it locally
Package it for npm
Publish and use it in other projects

1. Prerequisites

Make sure you have:

Node.js and npm installed
Angular CLI installed globally:
npm install -g @angular/cli
An npm account: Sign up here

2. Create a New Angular Workspace

Start by creating a new Angular workspace with the --create-application=false flag to not make default app.

ng new ng-library-demo --create-application=false
cd ng-library-demo

3. Generate a New Angular Library

Use the Angular CLI to generate a library:

ng generate library my-awesome-lib

This will create a projects/my-awesome-lib folder with:

src/lib/ → your components, services, pipes
src/public-api.ts → defines what’s exported
package.json and build configs

4. Add Some Functionality

Let us add a simple reusable service and component. Example: Greeting Service (greeting.service.ts)

import { Injectable } from '@angular/core';

@Injectable({
providedIn: 'root'
})
export class GreetingService {
getMessage(name: string): string {
return `Hello, ${name}!`;
}
}

Example: Greeting Component (greeting.component.ts)

import { Component, Input } from '@angular/core';

@Component({
selector: 'lib-greeting',
template: `<h2>Hello, {{name}} 👋</h2>`
})
export class GreetingComponent {
@Input() name: string = 'World';
}

Update Public API (public-api.ts)

/*
* Public API Surface of my-awesome-lib
*/
export * from './lib/greeting.service';
export * from './lib/greeting.component';
export * from './lib/my-awesome-lib.module';

5. Build the Library

Run:

ng build my-awesome-lib

This creates a ready-to-publish package under dist/my-awesome-lib.

6. Test Locally Before Publishing

Before publishing, test it in another Angular app.

Create a test Angular app inside the workspace:
ng generate application test-app
Link your library to the test app:
cd dist/my-awesome-lib
npm link
cd ../../
cd projects/test-app
npm link my-awesome-lib
Import the library into AppModule:
import { MyAwesomeLibModule } from 'my-awesome-lib';

@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, MyAwesomeLibModule],
bootstrap: [AppComponent]
})
export class AppModule {}
Use the component in app.component.html:
<lib-greeting name="John"></lib-greeting>

Run the app and verify it works! 🎉

7. Prepare for Publishing

Inside dist/my-awesome-lib, check your package.json. Make sure:

name is unique on npm
version follows semantic versioning (1.0.0 etc.)
main, module, and typings are correct (Angular CLI usually sets this up).

Example:

{
"name": "my-awesome-lib",
"version": "1.0.0",
"peerDependencies": {
"@angular/common": "^16.0.0",
"@angular/core": "^16.0.0"
}
}

Also add a README.md with installation and usage instructions.

8. Publish to npm

Login to npm:
npm login
Publish the library:
cd dist/my-awesome-lib
npm publish --access public

✅ Your Angular library is now live on npm!

Best Practices

Keep peerDependencies for Angular packages instead of bundling them.
Write unit tests for your components and services.
Maintain clear README.md documentation.
Follow semantic versioning (semver) strictly.
Use ng-packagr (built into Angular CLI) for packaging.

Conclusion

Creating an Angular library and publishing it to npm is a great way to share reusable components and services with the community (or across internal projects). With Angular CLI and ng-packagr, the process is straightforward — build, test locally, then publish to npm.

Samarth Srivastava

How to Add a Spinner, Tick Marks, and Logging in Your Shell Script

When you run a build script, plain echo messages often feel dull - you don't know if something is still running or stuck. Adding a spinner animation a... Read Here →

Understanding Cybersecurity Injections: Examples and Mitigations

Injection attacks are among the most common and dangerous web application vulnerabilities, injection flaws (like SQL Injection, Command Injection, and... Read Here →

How to Create an Angular Library and Publish it as NPM Package

When building large-scale Angular applications, you may develop reusable components, directives, or services that could benefit other projects. Instea... Read Here →

How to Create an NPM Package: A Step-by-Step Guide

Creating and publishing your own NPM (Node Package Manager) package can be a great way to share useful code, collaborate with the open-source communit... Read Here →

Understanding AI Agents and Using Them to Generate Code

AI agents are autonomous or semi-autonomous systems designed to interact with their environment, make decisions, and perform tasks to achieve goals. I... Read Here →

devConsulting.blog