How to built npm ready component library with Angular

Thanks for giving a try to my article. Welcome!

So far publishing an npm package was a dream to me and many developers like myself.

I would like to share my thoughts on how i have written a component library in Angular and published it as an npm module, Lets articulate in detail.

Prerequisite are

• NodeJS (v8.11.2)and NPM (v6.1.0)
• Angular Cli (v6.0.8)
• npm account

1. Lets start by creating an angular application. Go to command prompt to a work-space folder and run below command to create boilerplate for our app.

work-space > ng new angular-component-library

2. Once all the dependencies got installed. Lets start creating a library by running

work-space > cd  angular-component-library
work-space/angular-component-library > ng generate library ratify --prefix=lib

Note: above command creates a ratify library under project folder and component follows the prefix — lib i.e. <lib-ratify>

3. Before we start using our library, we need to understand how to use libraries in Angular. We can use libraries in two ways

• One way — via npm — install the library from an npm module for example, install the library into node_modules via npm install library-name import it in your application by name import { something } from 'library-name';
• Another way — Since we created library from our angular application, Angular cli automatically includes the library details by configuring in tsconfig.json and angular.json.

4. We will choose Another Way to continue our component development. I have created one rating component in the library

<lib-ratify [grade]="grade" [maxRating]="maxRating" [showRatingCounter]="showRatingCounter" (triggerRatingSelection)="selectedRating($event)"></lib-ratify>

5. You can find the usage and signature of the component here in npm and you can find the source code of the library here in github.

6. So far we are good with library creation with our angular application. Now lets see how we can test, by including a component from the library created, in our angular application.

7. To test, we need to build our library by running following command

work-space > angular-component-library > ng build ratify

Note: This will generate the output as below.

Always built your library first and then start the application with ng serve since application always refers to the library in the dist folder so building the library is mandatory before we start our application. And during development if any subsequent changes made in the library. Please rebuilt (ng build ratify)to see the change in the application where we consume.

Output for the angular library we built

8. Lets include the library module in our app.module.ts file as below

9. FYI — I have actually developed a rating component but in your case you can simply use <lib-ratify /> in app.component.html to see the output. If you are interested to see some colorful component with interaction feel free to reuse lib-ratify.

Note: above code prepares the attributes needed for the components and callback to receive the rating selection.

10. Lets add some standard scripts to built and pack npm module instead to use plain build command.

11. Delete the dist folder in the root of the application and run,

work-space > angular-component-library > npm run package

Go to dist folder and run the following command

work-space > angular-component-library > dist > ratify > npm whoami
work-space > angular-component-library > dist > ratify > npm adduser
work-space > angular-component-library > dist > ratify > npm login

12. Above commands are helpful to see whether you are logged in as npm user. If not, npm adduser will sign up for you via command prompt then npm login will logs you in.

13. Now publish your library,

work-space > angular-component-library > dist > ratify > npm publish

If you face an error on publishing, please check whether the name of library is already taken by running npm search your-library-name, if yes — change the name of the library in angular-component-library/projects/ratify/package.json

Apologize for a long journey, but hope this would give you fare understanding on angular component library development.

Feel free to use angular-ratify library in your angular application and let me know your feedback. Feel free to check Claps icon on left 👋👋👋

Thank you 🙏🙏🙏

✉️ Subscribe to CodeBurst’s once-weekly Email Blast, 🐦 Follow CodeBurst on Twitter, view 🗺️ The 2018 Web Developer Roadmap, and 🕸️ Learn Full Stack Web Development.