Dependency Management for Angular Package Format Modules | Task

Ole Ersoy
Mar - 06  -  3 min

Scenario

We have setup an Angular Workspace containing two library projects:

  • @fireflysemantics/forecasting
  • @fireflysemantics/optimization

Both are Angular Package Format libraries. The library @fireflysemantics/forecasting has @fireflysemantics/optimization as a peer dependency.

Whenever we publish updates of @fireflysemantics/optimization to Verdaccio we want those updates to be available within the @fireflysemantics/forecasting library.

We want to manage this using NPM Scripts.

For general instructions on how to create an Angular Package Format library see Creating an Angular NPM Installable Service Library.

For instructions on how to setup Verdaccio see Installing and Testing Verdaccio .

Approach

Both libraries reside in a workspace called fs-modules.

Will create an fs-module-dependencies package containing the @fireflysemantics/optimization peer dependency project.

mkdir fs-modules-dependencies
cd fs-modules-dependencies
npm init -y

Update package.json to look like this:

{
   "name": "@fireflysemantics/fs-modules-dependencies",
   "publishConfig": {
       "access": "restricted",
       "registry": "http://localhost:4873"
},
  "scripts": {
    "ig": "npm install -g @jsdevtools/version-bump-prompt",
    "bp": "bump patch",
    "p": "npm run bp && npm publish && cd ../fs-modules && npm run i"
  },
"dependencies": {
    "@fireflysemantics/optimization": "*"
},
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
    "ig": "npm install -g @jsdevtools/version-bump-prompt",
    "bp": "bump patch",
    "p": "npm run bp && npm publish"
},
"keywords": [],
"author": "Ole Ersoy"
}

Anytime we want to publish an update to this project we run npm run p.

Notice that the ig ( Install Global ) script allows us to install the global package @jsdevtools/version-bump-promt we are using for bumping the semantic version of the @fireflysemantics/fs-modules-dependencies project.

Also notice that we have set the semantic version of @fireflysemantics/optimization to *.

Doing this causes NPM to always look for the latest version when we install @fireflysemantics/fs-modules-dependencies in @fireflysemantics/fs-modules.

Publish @fireflysemantics/fs-module-dependencies to Verdaccio ( npm publish ).

Then go into the fs-modules project an install it as a dependency.

cd ../fs-modules
npm i @fireflysemantics/fs-modules-dependencies

Also within fs-modules add a script for installing @fireflysemantics/fs-modules-dependencies:

"i": "npm i @fireflysemantics/fs-modules-dependencies"

Anytime we run npm run i within the fs-modules Angular Workspace, it will install the latest version of @fireflysemantics/optimization since we set the semantic version of this depenency to * within @fireflysemantics/fs-modules-dependencies.

Also we can add more peer dependencies that are common to all our modules and as long as the version is set to * the latest release will be installed.

For example we also use these in various library projects:

  • "@fireflysemantics/slice": "*"
  • "nanoid": "*"

So they are included in the fs-modules-dependencies depdencies section as well.

Remember to publish fs-modules-dependencies each time new peer dependencies are added.

In order to make this simple we have included a publish script p:

"p": "npm run bp && npm publish && cd ../fs-modules && npm run i"

Thus whenever we run npm run p from inside the fs-modules-dependencies directory, the fs-modules project will be updated with the latest set of dependencies.