Ausree Ghose

·

Follow

2 min read

·

2 hours ago

--

3

Listen

Share

If you’ve ever found yourself copying the same component or pipe across multiple Angular projects, it might be time to create your own library. Trust me — it’s easier than it sounds and your future self will thank you.

I recently built a reusable UI component library for an internal tool and here’s how I did it — step by step.

Step 1: Create a Workspace

First, start fresh with an Angular workspace that supports multiple projects:

ng new my-workspace --create-application=falsecd my-workspace

This gives us a blank slate for managing both apps and libraries.

Step 2: Generate Our Library

Now let’s create the library:

ng generate library my-ui-lib

This command sets up everything for us: TypeScript config, entry points and testing support. We’ll find our library under projects/my-ui-lib/.

Step 3: Add Components, Services, or Pipes

Say we want a button component:

ng generate component fancy-button --project=my-ui-lib

The CLI automatically places it in our library’s folder. Just make sure to export it in the module (my-ui-lib.module.ts) so it’s available for use:

@NgModule({  declarations: [FancyButtonComponent],  exports: [FancyButtonComponent]})export class MyUiLibModule {}

Step 4: Test It in an App

Add a test app in the same workspace:

ng generate application demo-app

Now, in the AppModule of demo-app, import the library module:

import { MyUiLibModule } from 'my-ui-lib';@NgModule({  imports: [BrowserModule, MyUiLibModule],  ...})export class AppModule {}

The library is now ready for testing in a real Angular app.

Step 5: Build & Package

To build the library for distribution:

ng build my-ui-lib

We’ll find the output in dist/. If you want to publish it to npm (public or private), just cd into the dist folder and run:

npm publish

Suggestions:

• Use ng-packagr under the hood—it’s what Angular CLI uses.
• Keep the public API clean by exposing only necessary components in public-api.ts.
• Use peerDependencies for Angular core packages to avoid version mismatches.