DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones AWS Cloud
by AWS Developer Relations
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones
AWS Cloud
by AWS Developer Relations

Trending

  • Exploratory Testing Tutorial: A Comprehensive Guide With Examples and Best Practices
  • Merge GraphQL Schemas Using Apollo Server and Koa
  • Top 10 Engineering KPIs Technical Leaders Should Know
  • Revolutionizing Algorithmic Trading: The Power of Reinforcement Learning

Trending

  • Exploratory Testing Tutorial: A Comprehensive Guide With Examples and Best Practices
  • Merge GraphQL Schemas Using Apollo Server and Koa
  • Top 10 Engineering KPIs Technical Leaders Should Know
  • Revolutionizing Algorithmic Trading: The Power of Reinforcement Learning
  1. DZone
  2. Coding
  3. Frameworks
  4. Creating an Angular Library and Publishing on npm

Creating an Angular Library and Publishing on npm

Astha Gupta user avatar by
Astha Gupta
·
Aug. 03, 20 · Tutorial
Like (2)
Save
Tweet
Share
12.41K Views

Join the DZone community and get the full member experience.

Join For Free

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
xxxxxxxxxx
1
 
1
ng new my-workspace --create-application=false 


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

Shell
xxxxxxxxxx
1
 
1
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'. 

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
xxxxxxxxxx
1
 
1
ng build custom-lovs (ng build <library-name>)
2
3
ng test custom-lovs (ng test <library-name>)
4
5
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.

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
xxxxxxxxxx
1
 
1
my-workspace/dist/custom-lovs -> npm adduser 
2
# will sign up for you via command prompt


After creating an account, follow below steps:

Shell
xxxxxxxxxx
1
 
1
my-workspace/dist/custom-lovs -> npm login 
2
# enter your npm credentials
3
4
my-workspace/dist/custom-lovs -> npm whoami 
5
# to ensure who is logged in as npm user


Now publish the library 

Shell
xxxxxxxxxx
1
 
1
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.

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

Library AngularJS Npm (software)

Opinions expressed by DZone contributors are their own.

Trending

  • Exploratory Testing Tutorial: A Comprehensive Guide With Examples and Best Practices
  • Merge GraphQL Schemas Using Apollo Server and Koa
  • Top 10 Engineering KPIs Technical Leaders Should Know
  • Revolutionizing Algorithmic Trading: The Power of Reinforcement Learning

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com

Let's be friends: