Create Angular Library NPM/YARN project with backward version support

Have you ever wanted to publish your own Angular library project on NPM package repository? In this story, we will create an Angular library project ngx-highlight-text to highlight a text element, and publish it on NPM to be publically available. This library can be used by any Angular projects with version 9 onward (till recent version 15 at the time of writing this story) with partial Ivy support.

Let’s get started.

Set up a workspace

1. You may have an up-to-date Angular CLI version installed globally. You can verify the current version by running the command ng version in any non-angular project directory.
2. To support backward Angular projects with version 9 onward, we will need to temporarily install Angular CLI version 9 and create a project workspace. Run the below command to create a workspace project directory.

npx @angular/cli@9 new ngx-highlight-text-workspace --create-application=false

Warning: Angular library projects should be prefixed with ngx and not ng as they are reserved for official Angular libraries.

Depending upon your globally installed Node version, and Angular version, you may encounter an error while running this command as below for karma…