Angular Package Library: Creation & Publishing Guide

A complete guide to creating an Angular library, testing it locally, and publishing to npm.

Prerequisites

• Node.js (v18+) and npm installed
• Angular CLI installed globally: npm install -g @angular/cli
• npm account (create at npmjs.com

Part 1: Create the Angular Workspace & Library

Step 1: Create a New Angular Workspace

ng new my-library-workspace --no-create-application
cd my-library-workspace

--no-create-application creates an empty workspace without a default app.

Step 2: Generate the Library

ng generate library my-awesome-lib

This creates:

projects/
  my-awesome-lib/
    src/
      lib/
        my-awesome-lib.component.ts
        my-awesome-lib.service.ts
        my-awesome-lib.module.ts
      public-api.ts          # Entry point - export everything here
    ng-package.json          # Library build config
    package.json             # Library package.json

Step 3: Develop Your Library

Edit files in projects/my-awesome-lib/src/lib/:

// my-awesome-lib.component.ts
import { Component, Input } from '@angular/core';

@Component({
  selector: 'lib-my-awesome',
  template: `<div class="awesome">{{ message }}</div>`,
  styles: [`.awesome { padding: 10px; background: #f0f0f0; }`]
})
export class MyAwesomeComponent {
  @Input() message = 'Hello from my library!';
}

Step 4: Export Public API

Edit projects/my-awesome-lib/src/public-api.ts:

// Export everything consumers should access
export * from './lib/my-awesome-lib.service';
export * from './lib/my-awesome-lib.component';
export * from './lib/my-awesome-lib.module';

Part 2: Create a Tester Application

Step 1: Generate Test Application

ng generate application tester-app

This adds a test app under projects/tester-app/.

Step 2: Link the Library to Tester App

In tsconfig.json (root), ensure paths are configured:

{
  "compilerOptions": {
    "paths": {
      "my-awesome-lib": ["projects/my-awesome-lib/src/public-api.ts"]
    }
  }
}

Step 3: Use the Library in Tester App

Import and use in projects/tester-app/src/app/app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MyAwesomeLibModule } from 'my-awesome-lib';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, MyAwesomeLibModule],
  bootstrap: [AppComponent]
})
export class AppModule {}

Use component in app.component.html:

<lib-my-awesome message="Testing my library!"></lib-my-awesome>

Step 4: Run the Tester App

# Build library first (watch mode)
ng build my-awesome-lib --watch

# In another terminal, serve the tester app
ng serve tester-app

Visit http://localhost:4200 to see your library in action.

Part 3: Build & Publish to npm

Step 1: Update Library package.json

Edit projects/my-awesome-lib/package.json:

{
  "name": "@your-npm-username/my-awesome-lib",
  "version": "1.0.0",
  "description": "My awesome Angular library",
  "keywords": ["angular", "library"],
  "author": "Your Name",
  "license": "MIT",
  "repository": {
    "type": "git",
    "url": "https://github.com/username/repo.git"
  },
  "peerDependencies": {
    "@angular/common": "^17.0.0",
    "@angular/core": "^17.0.0"
  }
}

Step 2: Add a README for npm

Create projects/my-awesome-lib/README.md:

# My Awesome Lib

## Installation
npm install @your-npm-username/my-awesome-lib

## Usage
Import the module and use components...

Step 3: Build for Production

ng build my-awesome-lib --configuration production

Output is in dist/my-awesome-lib/.

Step 4: Login to npm

npm login

Step 5: Publish

cd dist/my-awesome-lib
npm publish --access public

Use --access public for scoped packages (@username/package-name).

Part 4: Version Management & Updates

Bump Version

cd projects/my-awesome-lib
npm version patch   # 1.0.0 -> 1.0.1
npm version minor   # 1.0.0 -> 1.1.0
npm version major   # 1.0.0 -> 2.0.0

Republish

ng build my-awesome-lib --configuration production
cd dist/my-awesome-lib
npm publish

Quick Reference Commands

| Task | Command | |------|--------| | Create workspace | ng new my-workspace --no-create-application | | Generate library | ng generate library my-lib | | Generate tester app | ng generate application tester-app | | Build library (watch) | ng build my-lib --watch | | Build library (prod) | ng build my-lib --configuration production | | Serve tester app | ng serve tester-app | | Publish to npm | cd dist/my-lib && npm publish --access public |

Project Structure Overview

my-library-workspace/
├── angular.json
├── package.json
├── tsconfig.json
├── projects/
│   ├── my-awesome-lib/          # Your library
│   │   ├── src/
│   │   │   ├── lib/             # Library source code
│   │   │   └── public-api.ts    # Public exports
│   │   ├── ng-package.json
│   │   └── package.json
│   └── tester-app/              # Test application
│       └── src/
│           └── app/
└── dist/
    └── my-awesome-lib/          # Built library (publish this)

Tips

1. Peer Dependencies: Always use peerDependencies for Angular packages to avoid version conflicts
2. Semantic Versioning: Follow semver (major.minor.patch) for version updates
3. Testing: Run ng test my-awesome-lib to run unit tests
4. Documentation: Include good README and inline documentation
5. Scoped Packages: Use @username/package-name format to avoid naming conflicts