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.

In appcomponent.html we are using this library component.

<lib-footer>Welcome to Angular Application</lib-footer>

 

Run application and you can find it is implemented in your new application.

Log in to npm

Before publishing you need to log in to npm 

npm login

Publishing

Then we have to publish our .tgz file.

npm publish  and give its path

After publishing we can see our library in npm. Anyone can use our library.

Thanks to ng Packagr for extending the benefits of CLI. It is now possible to develop Angular Component Libraries using 
simple workflow given to us by the CLI.

By:Sirisha Madaka
Mouri Tech Pvt Ltd