Building Libraries in Angular — Part 1

4 min readSep 27, 2020

1. What are software libraries?

Software libraries are software solutions created by few developers targeting a common problem that can be used by other developers into their projects. Developers integrating these solutions don’t need to worry about underlying code written to solve the problem. Libraries are basically integrable abstract software layers.

These libraries can be open source like Angular Material or paid like PrimeNG.

2. What are we building?

We’ll be building a basic calculator library that can be used across multiple Angular projects for doing basic mathematical stuff like addition, subtraction, division, and multiplication. We can then host the library on npm for a wider audience.

3. Basic Setup

System Configuration

OS:- Windows 10, Node:- v.12.18.3, npm:- v.6.14.6, Angular:- v.10.1.1

We’ll start by creating a basic Angular project using angular-cli.

ng new calc-lib-test-app --routing

Now, we’ll quickly look into the angular.json file —

As you can see, in the “projects” array there is only one entry which is for our newly created ‘calc-lib-test-app’ project.

4. Creating a calculator library

Angular-cli (v6.0+) provides a super-easy way to create a library. Just run

ng generate library <library-name> --prefix=<prefix to be used>

Let’s name the library ‘calculator-lib’ and give it a prefix ‘my’.

ng generate library calculator-lib --prefix=my

The prefix will be added to the selector of all the components of the library. This helps in the future when we’ll integrate the lib into the project to differentiate between project components and lib components.

After running this command few things in the project will change —

package.json

ng-packagr is the newly added dependency. ng-packagr is an npm package to convert angular libraries into angular package format.

angular.json

Now, the “projects” array has one more entry called ‘calculator-lib’. Also, note that the ‘projectType’ is mentioned as a library.

Folder structure

The ‘projects/calculator-lib’ in added in the root path alongside the src folder.

ng-package.json

This is the config file for ng-packagr. The ‘entryFile’ is mentioned ‘public-api.ts’ file. This is the file from where the components, modules, and services need to be exported.

public-api.ts

The public-api.ts file is intended to enumerate and expose specific functionality for external use.

Once built, the library will be available in the dist folder.

calculator-lib folder structure

The generated lib folder will contain module, ts, and service files. All the imports, declarations go into the module file, all the business logic goes into the ts file, and all data related activity goes into service files. Just like any other angular project!

Above is the generated ts file. As you can see the selector is ‘my-calculator-lib’ & when we integrate the library, it should display the text ‘calculator-lib works!’

5. Integrating the calculator-lib

Now, let’s integrate the library into our main src project.

Changes in package.json file

add the command to build the library

"build-lib": "ng build calculator-lib"

Add the library path to dependencies array

"calculator-lib": "file:dist/calculator-lib"

changes in dependencies array in package.json file

2. Run the build command

npm run build-lib

As shown above, the library is built in the dist folder.

3. To install this lib into our project, run

npm install calculator-lib

The library is installed now.

4. Use the lib into the project

import the calculator-lib in app.module.ts -

And then, in app.component.ts add the selectors.

Do ng serve, and you should see this —

Yipee! the library works. :)
In Part 2 of the blog we’ll do the addition, deletion, multiplication and divison using our calculator library.