Angular Component Library

Angular 6 was realeased with many improvements and one among them is the integration of Angular CLI with ng-packagr for generating and building Angular Libraries. ng-packagr is a tool that transpiles the libraries into Angular Package Format.

This blog is about the details of creating a component library and implementing it in another Angular application.

Creating an Angular Workspace

First we have to create a project using ng new.So now the Angular CLI creates a workspace.

 ng new PackageLibrary

 cd PackageLibrary
 ng serve                                 

                                          

    

Generating a component library

Now we will generate the component Library using the command ng generate library. A project folder is generated in the workspace with Library component. 

ng generate library Footer

In angular.json there is project object of the main application. Now after generating the library a new project object is created.

 "projects": {

"LibraryPackage": {...}     
"LibraryPackage-e2e": { ...}
"footer":{...}},            

In package.json "@angular-devkit/build-ng-packagr": "~0.8.0", is included in dev dependencies.

In tsconfig.json lib path is added to it.

"paths": {

"footer": [

"dist/footer"]     

In the project folder we can find our library. In our library the Angular CLI created a new module with a service and a component. Along with the library we can also find package.json and ng package.json

package.json: This is the one that gets published with our library as an npm package. It specifies the dependencies.

{

"name": "footer",

"version": "0.0.1",

"peerDependencies": {

"@angular/common": "^6.0.0-rc.0 || ^6.0.0",

"@angular/core": "^6.0.0-rc.0 || ^6.0.0"

}

}

ng package.json: This is the configuration file for ng-packagr. It tells ng-packagr where to find our entry file and where to build our library.

{

"$schema": "../../node_modules/ng-packagr/ng-package.schema.json",

"dest": "../../dist/footer",

"lib": {

"entryFile": "src/public_api.ts"

}

}

In src folder we can find public-api.ts This is the entry file.

export * from './lib/footer.service';

export * from './lib/footer.component';

export * from './lib/footer.module';

Now we can write the code in component library. A footer is created in footercomponent.ts

After that in appmodule.ts we will import the FooterModule.  

import { FooterModule } from '../../projects/footer/src/lib/footer.module';

imports: [

BrowserModule,

FooterModule

],

Now in app.html we will add the footer

<lib-footer>This is the footer</lib-footer>

Now run the project with the command ng serve.

Building the Library

The library component is working so now we have to bulid it. We will add a script to build our library in package.json

"build:lib":"ng-packagr -p ./projects/footer/ng-package.json"

And we will bulid it through the command npm run build:lib

Packaging the Library

Go to the dist folder cd dist

Go to the footer component cd footer

For packaging our library we have to give a commands npm pack .

Then in dist folder in lib a file is added. Footer-0.0.1tgz. Copy and save this file in any folder.

Using the Library in a Angular Application

We can use this file in any other Angular 6 application. Open any Angular application where you want to implement your component library.

Installing the library

Now give the command npm i –-save and give the path of the library file.After installing you can find the library file in node modules.

npm i –saveD:\LibraryPackage\dist\footer-0.0.1.tgz

Importing the library module

We should import in our appmodule.ts Now we can use footer component library in this application.