Angular monorepo dependencies

Question

I have built a monorepo with three libraries in it, lib1, lib2 and lib3. The latter depends on lib1 and lib2.

What I try to achieve is to locally reference lib1 and lib2 in lib3.

So far I have always published lib1 and lib2 to a npm registry and then installed the new versions of it to be able to publish an up to date lib3. So the package.json files would look like this:

packages/package.json

{
  "name": "packages",
  "scripts": {
    "build-lib1": "ng build lib1",
    "build-lib2": "ng build lib2",
    "build-lib3": "ng build lib3"
  },
  "private": true,
  "dependencies": {
    "lib1": "1.0.0",
    "lib2": "1.0.0",
    ...
  },
  "devDependencies": {
    ...
  }
}

packages/lib1/package.json

{
  "name": "lib1",
  "peerDependencies": {
    ...
  },
  "dependencies": {
    "tslib": "^2.4.0"
  }
}

packages/lib2/package.json

{
  "name": "lib2",
  "peerDependencies": {
    ...
  },
  "dependencies": {
    "tslib": "^2.4.0"
  }
}

packages/lib3/package.json

{
  "name": "lib3",
  "peerDependencies": {
    ...
  },
  "dependencies": {
    "tslib": "^2.4.0",
    "lib1": "1.0.0",
    "lib2": "1.0.0"
  }
}

As you can see, I added lib1 and lib2 as a dependency to lib 3, not as a peerDependency. That is done on purpose because when installing lib3 in another application, lib1 and lib2 should automatically added (transitive dependencies). Therefor I had to add lib and lib2 to allowedNonPeerDependencies within packages/lib3/ng-package.json .

The versions of the libraries are set within a CI pipeline and are based on the git tag of the repository. So what happens right now is that there are different versions for lib1/lib2 and lib3. For example I publish v1.0.0 for lib1 and lib2, then I have to update those dependencies in the project. So lib3 will have for example v1.0.1.

Additional information on the used versions:

• Angular 15
• Typescript 4.8.3
• npm 9.2.0

So what I would like to do instead is to just directly reference lib1 and lib2 within lib3 without losing the transitive dependency behavior.

What is the best approach to achieve this goal? I have already done some research on npm workspaces and project references in typescript, but I'm stuck right now and don't know how to get it done.

Answer 1

One option to research would be an nx workspace ( https://nx.dev/getting-started/intro ).

It should be still possible to solve in angular only but nx would solve several problems:

• local lib references
• libs can be buildable
• lib dependencies taken care of out-of-the-box
• no need for wait-on style build scripts

In addition you get

• a graph visualisation of lib dependencies
• caching for common task like build, lint etc.

I recommend Nx Console (extensions to VS Code / webstorm) for generating libraries etc. if you go down this route.

The ebook Enterprise Angular Monorepo Patterns (highly recommend) was by made one of libraries authors and Nx is used by NgRx library.