Publish Your Library to Your Company’s Artifactory

How to publish your Angular library to your company’s own artifactory (like JFrog)

Photo by ot. Sunny on Unsplash

If you are developing libraries for a project in your company, you would probably be expected to keep your libraries in your company’s artifactory. In this article, I will explain how you will publish and install your libraries there.

Publish operation will be carried out with a DevOps pipeline. DevOps team will give rights to reach to a specific folder (probably named as your team name or project name) in the artifactory. For that reason, you will be giving a scope to your libraries with the same name, in their own package.json file:

"name": "@yourteamname/ngsd-mylibrary",
"version": "0.0.1",

I have this run config in my angular.json under “scripts”:

"build-ngsd-mylibrary": "ng build --project=@yourteamname/ngsd-mylibrary --prod"

You may get “Trying to publish a package that has been compiled by Ivy…” error. You can fix this by adding parameter just like the upper command. You can see this link. You can also check here, it is said that you do not have to do this in Angular 6+ versions.

In Jenkinsfile, these commands can be added for publish (here, I navigate to dist/library path so that npm can use my library’s package.json. “curl” command is to get credentials for the artifactory):

rm -rf package-lock.json
npm config set cache /data/cache/npm
npm set progress=false
npm install --prefer-offline --registry=http://artifactory.yourcompany.com/artifactory/api/npm/npm --sass-binary-site=https://artifactory.yourcompany.com/artifactory/local-npm
npm run build-ngsd-mylibrary
cd ./dist/ngsd-mylibrary
curl -u${artifactoryCredentials} "https://artifactory.yourcompany.com/artifactory/api/npm/local-npm-dist-dev/auth/yourteamname" >> ~/.npmrc
npm publish --registry https://artifactory.yourcompany.com/artifactory/api/npm/local-npm-dist-dev/

You can then install your freshly published version:

npm install @yourteamname/ngsd-mylibrary@0.0.1 --registry http://artifactory.yourcompany.com/artifactory/api/npm/virtual-npm/

Your DevOps pipeline build also must be downloading dependencies from your company’s artifactory, so you can update your npm config to pull from there. npm is different from maven. In maven, you can have multiple repositories in your maven settings xml file but in npm you can set only one.

But there is another option. To be able to push to the folder where you are given permission in the repository, you have to generate libraries with a scope. For that reason, you can define a config such as “pull packages with a specific scope name from this url”. You can read from this link to have a better understanding.

senoritadev:home senoritadev$ npm login --scope=@yourteamname --registry=https://artifactory.yourcompany.com/artifactory/api/npm/virtual-npm/
Username: senoritadev
Password: 
Email: (this IS public) youremail@domain.com
Logged in as senoritadev to scope @yourteamname on https://artifactory.yourcompany.com/artifactory/api/npm/virtual-npm/.

After this command succeeds, .npmrc file is created under /Users/your_mac_user_name path.

You can also check all your npm config definitions with the commands listed here:

As you may have noticed, install command with registry has a url starting with http, whereas npm login command registry uses https. Hence, I suspect I got an error when I just tried “npm install @yourteamname/ngsd-mylibrary@0.0.1” without registry parameter. It seemed to reach but was not able to find my library. I opened my .npmrc file (you can see hidden files in your Finder with Command + Shift + .) and edited by adding an extra letter “y” (see outlined in purple in screenshot) and saved. After that, npm install command completed successfully.

Don’t forget to delete config and npm login again after your password updates.

Happy Coding!