Now writing lib is as easy as component

Write your own library with Angular 6

Suwigya Rathore
Jun 9, 2018 · 4 min read

Angular 6 is recently released with so many new awesome features, here is a full list in case you are interested. This article explores one of those features, which is a tool to create your own lib in Angular format

Let's Start

Angular CLI has now integration with ng-packagr, it's a great way of getting your library in Angular format. We are going to use Angular CLI throughout of our setup

  • Firstly, we will create a lib of some components and services, which can be published
  • Secondly, we will create a consumer project

Angular 6

New Angular CLI 6+ supports workspaces, which supports multiple projects. In order to update your CLI to the latest version, please execute the following commands in your terminal.

Before that make sure you ur node is at least on 8.9.0 +

npm uninstall -g angular-cli
npm cache verify
npm install -g @angular/cli
Check your version by ng --version

Target

  • Use the Angular CLI to create a workspace ng6-lib-work
  • We will then generate our library project naming ng6-lib
  • We will consume our ng6-lib by importing it as a library into our ng6-lib-work application.

Creation of Workspace

Our first goal is to create our workspace so lets execute below commands to get one and spin the server up to see output

ng new ng6-lib-work
cd ng6-lib-work
ng serve

If you see famous Angular starter project you are on right path.

New Angular 6 Configuration

The earlier version of Angular CLI was generation angular-cli.json but by version 6 it now generates angular.json with some modified contents.

The main thing to see is the projects object. It has one entry for each project.

In projects section you should see something like below

"projects": {
"ng6-lib-work": {
...
...
},
"ng6-lib-work-e2e": {
...
}
}

The first project is the name of workspace we created and second one the e2e project generated by itself. Once we create our lib project we will see another entry soon in project object with ng6-lib.

Creation of Library module

Lets create our library project now by using below command

ng generate library ng6-lib --prefix=nlib

Here we uses nlib as prefix to make it unique else Angular CLI will use lib by default.

Don’t get scared by amount files it created , we will go through with some of the features being added by our super cool CLI on execution of generate library command.

  • Adds a ng6-lib project for our library in angular.json
  • ng-packagr dependeny added to our package.json
  • Adds a reference to the ng6-lib build path in tsconfig.json
  • Creates sources for our library in projects/ng6-lib

Building our Library

Before we can use our new library don’t forget to build it

ng build --prod ng6-lib

This builds our library to the folder:
ng6-lib-work\dist\ng6-lib

Using the prod flag will build it using AOT that helps us in finding errors way ahead.

Lets use it

The main goal behind any library is to have a project for which this library was created for this we have our ng-lib-work project . Here we are going to consume but ti keep it simple for now we will just import the module created by Angular CLI in our sample app and display default component.

We we will add that module to imports of app.module.ts of ng-lib-work project. Now the question is from where you will import. If you remember the changes made in tsconfig.json when we generated library.

"ng6-lib": ["dist/ng6-lib"]

This setting allows you to import Ng6LibModule from ng6-lib instead directly from file which is aligned when it later published to npm.

So your app.module.ts should look like this

After importing this module lets add the tag of component from our newly created lib like below

If everything gone fine you should see your component rendered on browser.

Making your lib ready for NPM

Well we all know when we write lib its not only for local usage may be you want to write something for bigger group or open source community so with build you have to package that also.

for this you have to modify your package.json to add below handy scripts

"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"build-lib": "ng build --prod ng6-lib",
"npm-pack": "cd dist/ng6-lib && npm pack",
"package": "npm run build-lib && npm run npm-pack"
}
  • build-lib: builds the library using the production flag.
  • npm-pack: creates an npm package as a .tgz file.
  • package: combines building and packaging in a single command.

So what you are waiting for execute below command to get your package ready for npm

npm run package

Note: It may be possible that like me you don’t see newly created gzip file in vscode please go to finder to see newly generated file.

Conclusion

Thank you for your time and patience ,I assume if you reached this section you must be having at least a basic idea of how powerful and integrated is new Angular CLI 6 is for creating libraries which are npm ready.

I wrote this while taking inspiration from here but I found this article little tough for beginners.

If you interested in seeing code of above article clone here.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade