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.
Top comments (0)