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.
Let’s generate Angular Library in the created angular workspace named ‘custom-lovs’.
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.
Building an Angular Library
We can build, test and lint the project with the below CLI commands:
The Angular library is always built with the AoT compiler, without the need to specify the
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.
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
After creating an account, follow below steps:
Now publish the library
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
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.
Use the created & published angular library in app.component.html.
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.