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
- You may have an up-to-date Angular CLI version installed globally. You can verify the current version by running the command
ng versionin any non-angular project directory.
- 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
ngas 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! While resolving: firstname.lastname@example.org
npm ERR! Found: email@example.com
npm ERR! node_modules/jasmine-core
npm ERR! dev jasmine-core@"~3.5.0" from the root project
npm ERR! Could not resolve dependency:
npm ERR! peer jasmine-core@">=3.8" from firstname.lastname@example.org