Create Angular Library
Tags: angular, webdev, typescript
Published: 2020-05-20 15:35:35

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](https://angular.io/guide/setup-local).

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

```prettyprint
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,

```javascript
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:
```javascript
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](https://angular.io/guide/creating-libraries#publishing-your-library).  

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.  

```npm
  "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:

```javascript
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](http://localhost:4200/), you'll see `my-lib works!` displayed.

#####Congratulations you've successfully created angular library!!

Code available on [github](https://github.com/Dimakzela/angular-library-example)

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