Create Angular Library

Today we're going to create a new reusable library. If you find youself creating the same component in more than one app (or you want to share your component with other developers), you have a need for a library.

Create the project

We'll use angular cli to generate library skeleton. If you don't have angular cli installed, refer to angular cli installation guide.

The following commands will generate angular project my-project and library my-lib

ng new my-project
cd my-project
ng generate library my-lib

This creates projects/my-lib in my-project folder, which contains
my-lib.component.ts and my-lib.service.ts. Angular cli also created public-api.ts file in my-lib folder. This file contains the following lines of code,

export * from './lib/my-lib.service';
export * from './lib/my-lib.component';
export * from './lib/my-lib.module';

This file defines what is available to the users of the library (A.K.A public API).

If you open my-lib.component.ts, you'll see the following code:

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

@Component({
  selector: 'lib-my-lib',
  template: `<p>my-lib works!</p>`,
  styles: []
})
export class MyLibComponent implements OnInit {
  constructor() { }
  ngOnInit(): void {}
}

This simple library output my-lib works! and we'll use selector,
<lib-my-lib></lib-my-lib> to consume the component.

Install the library as npm dependency.

To use any library in angular, you need to install it from package manager such as npm. In this example we'll not publish our library to npm package manager. If you want to learn about how to publish angular library, refer to angular guide.

Now we'll install my-lib as npm dependency from file. Open package.json and add "my-lib": "file:projects/my-lib" in dependencies block, See the code snippet below.

  "dependencies": {
    ...
    "@angular/router": "~9.1.4",
    "rxjs": "~6.5.4",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2",
    "my-lib": "file:projects/my-lib"
  }

my-lib is the package name you will see in node_modules folder and file:projects/my-lib is the actual library. If we'd published our library to npm, we'd replace file:projects/my-lib with version number(0.0.1).

If you run npm install, you'll notice my-lib added into node_modules folder. Now we can import and use the library in our project. see code snippet below:

import {MyLibModule} from 'my-lib';

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

Now that we imported the library module into our project, we can use MyLibComponent. Open app.component.html and replace all the code with
<lib-my-lib></lib-my-lib>.

Run the app

Run npm start or ng serve to start the app. Open the browser and vist http://localhost:4200, you'll see my-lib works! displayed.

Congratulations you've successfully created angular library!!

Code available on github

Thank you for reading. Please leave a comment or a question.