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 and jasmine.

projects npx @angular/cli@9 new ngx-highlight-text-workspace --create-application=false
CREATE ngx-highlight-text-workspace/README.md (1043 bytes)
CREATE ngx-highlight-text-workspace/.editorconfig (274 bytes)
CREATE ngx-highlight-text-workspace/.gitignore (631 bytes)
CREATE ngx-highlight-text-workspace/angular.json (136 bytes)
CREATE ngx-highlight-text-workspace/package.json (1222 bytes)
CREATE ngx-highlight-text-workspace/tsconfig.json (489 bytes)
CREATE ngx-highlight-text-workspace/tslint.json (2933 bytes)
⠙ Installing packages...npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: ngx-highlight-text-workspace@0.0.0
npm ERR! Found: jasmine-core@3.5.0
npm ERR! node_modules/jasmine-core
npm ERR!   dev jasmine-core@"~3.5.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer jasmine-core@">=3.8" from karma-jasmine-html-reporter@1.7.0
npm ERR…