Creating an Angular Library and Publishing on npm
Join the DZone community and get the full member experience.
Join For FreeAngular 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
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..!!
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