{{announcement.body}}
{{announcement.title}}

Creating an Angular Library and Publishing on npm

DZone 's Guide to

Creating an Angular Library and Publishing on npm

Have a TS module that you think others could benefit from? Open source it with the help of npm and this quick tutorial.

· Web Dev Zone ·
Free Resource

Angular Libraries 

An Angular library is an Angular project that differs from an application which can run on its own. A library must be imported and used in an app. 

Angular libraries are created as a solution to general problems that can be reusable for more than one application. 

This Article covers following topics:

  • Generating an Angular library.
  • Building and Publishing an Angular library on npm.
  • Consuming the Published Library in Angular Application.

Generating an Angular Library 

Let’s create an Angular workspace for angular library which is not an application. 

Shell


Let’s generate Angular Library in the created angular workspace named ‘custom-lovs’.

Shell


Angular CLI would automatically takes care of including library details by configuring in tsconfig.json and the workspace configuration file, angular.json, is also updated with a project of type 'library'. 

tsconfig.json file

tsconfig.json

angular.json file

angular.json

Your project structure will look like this:

project file structure

Define the logic, interfaces, and reusable code in the component/services of the created library. 

To make library code reusable, we must define a public API for it. The public API for the library is maintained in the public.api.ts file. 

It will be updated automatically with CLI created components to export. If we are creating new components, directives or pipes, do not forget to export them in public.api.ts to make it available outside the module.

Anything exported from this file is made public when our library is imported into an application.

Our created library should supply documentation (typically a README file) for installation and maintenance.

public-api.ts file

public-api.ts file

Building an Angular Library 

We can build, test and lint the project with the below CLI commands:

Shell


The Angular library is always built with the AoT compiler, without the need to specify the --prod flag.

Note: If any subsequent change is made in the library, re-building the library is mandatory.

Publishing Angular Library on npm

Some standard scripts can be added to build and pack npm module instead to use plain build command.

tspackage.json file

tspakcage.json file

Use the Angular CLI and the npm package manager to build and publish your library as npm package.

Since libraries are built in AoT mode by default, the --prod flag is not required while building for publication.

Before publishing the library, create an account on npm

Shell


After creating an account, follow below steps:

Shell


Now publish the library 

Shell


Note: If you face an error, while publishing the library make sure your library name is unique in npmjs and same can be ensured by: npm search library-name

Republishing Library

To republish the library, version needs to be updated manually in package.json and same steps should be followed to rebuild and republish the library with the new updated version.

custom-lovs library on npm

Consuming the Published Angular Library to Any Angular Application

Install the Angular library into Angular application npm install custom-lovs

Include the created library module in our app.module.ts.app.module.ts

app.module.ts

Use the created & published angular library in app.component.html.

app.component.html file

Required properties can be defined in app.component.ts which are mandatory as input parameters for Angular libraries.

This is how angular libraries can be useful in making the components reusable.

Happy Reading..!!

Topics:
angular, npm, tutorial, typescript, web dev

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}