Creating an Angular Library and Publishing on npm

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. 

xxxxxxxxxx

ng new my-workspace --create-application=false 

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

xxxxxxxxxx

my-workspace -> ng generate library custom-lovs –prefix=lib 

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'. 

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

Building an Angular Library 

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

xxxxxxxxxx

ng build custom-lovs (ng build <library-name>)

ng test custom-lovs (ng test <library-name>)

ng lint custom-lovs (ng lint <library-name>)

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.

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

xxxxxxxxxx

my-workspace/dist/custom-lovs -> npm adduser 

# will sign up for you via command prompt

After creating an account, follow below steps:

xxxxxxxxxx

my-workspace/dist/custom-lovs -> npm login 

# enter your npm credentials

my-workspace/dist/custom-lovs -> npm whoami 

# to ensure who is logged in as npm user

Now publish the library 

xxxxxxxxxx

my-workspace/dist/custom-lovs -> npm publish

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.

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

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

app.component.html file

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

Happy Reading..!!