Use NPM >7 and workspaces

[boeckMt]

Description

To better handle dependencies management try to use NPM 7 workspaces with the monorepo.

• https://docs.npmjs.com/cli/v7/using-npm/workspaces

• https://dev.to/limal/simplify-your-monorepo-with-npm-7-workspaces-5gmj

• https://2ality.com/2021/07/simple-monorepos.html?utm_source=typescript-weekly.com&utm_campaign=typescript_weekly_175&utm_medium=email

// package.json
workspaces": [
    "projects/*",
    "scripts/*"
  ],
...

Dependencies management right now (NPM)

• there is on package.json in the root of the repo which includes all dependencies used in all the projects
• each project has its own package.json which includes:
  • peerDependencies to angular and overall used dependencies
  • the direct dependencies of the project and also other @dlr-eoc/projects are listed here as dependencies

Dependencies related to the Build process

Only use npm workspaces is not enough to build all the projects. Projects can also depend on other projects.

1. To create a build currently we get the list of all projects from angular.json
2. Then we get its dependencies (with scope @dlr-eoc) from the package.json (by using project.root from angular.json)
3. To check that all the projects which depend on other projects are listed correctly we use depcheck
4. Then we build a 'dependencies graph'
5. To get a legal build execution order we use toposort
6. To build the projects then we build each project in this order by ng build <project> --prod=true --watch=false

[boeckMt]

For this we also have to update the github actions to use node 15.x actions/setup-node#213 (comment)

// https://github.com/actions/setup-node
steps:
- uses: actions/checkout@v2
- uses: actions/setup-node@v2
  with:
    node-version: '15'

[boeckMt]

• npm install is installing all dependencies for the projects.

• ng update for the workspaces // 'ng update' does not work with yarn workspaces angular/angular-cli#14841

[boeckMt]

Use Npm Workspaces

Install package in a workspace

• npm i <p-name> --workspace=projects/<name>

create a new package and add it to the workspace

• npm init -w ./projects/<name>

[boeckMt]

Npm install for the whole workspace

Currently this fails due to the version paceholders we have set

Could not resolve dependency:
npm WARN peer @angular/common@"0.0.0-PLACEHOLDER-VENDOR" from @dlr-eoc/[email protected]
...
npm WARN Could not resolve dependency:
npm WARN peer @angular/core@"0.0.0-PLACEHOLDER-VENDOR" from @dlr-eoc/[email protected]
...
npm WARN Could not resolve dependency:
npm WARN peer rxjs@"0.0.0-PLACEHOLDER-VENDOR" from @dlr-eoc/[email protected]
...

we could try to use the script setVersionsforDependencies and restore it after the install somehow.

---

possibly related: npm/rfcs#301

[boeckMt]

There is also syncpack

[boeckMt]

Good post about package managers: https://blog.logrocket.com/advanced-package-manager-features-npm-yarn-pnpm/

[boeckMt]

4. Then we build a 'dependencies graph'
5. To get a legal build execution order we use toposort
6. To build the projects then we build each project in this order by ng build <project> --prod=true --watch=false

If we could ensure that the workspaces are always sorted according to the order in topsort, we could run the build via npm workspaces commands.

Commands will be run in each workspace in the order they appear in your package.json
https://docs.npmjs.com/cli/v7/using-npm/workspaces#running-commands-in-the-context-of-workspaces

[boeckMt]

Paceholders are now removed! bc9e9ed, c82bdf0

To sync the versions we use a script which checks if dependencies in our packages are also in the root package.json and thenm uses this version. It also updates packages version with the one from the root package.json.

• https://github.com/dlr-eoc/ukis-frontend-libraries/blob/b4158a752d420cfd043c02cdedefef6564f99c1f/scripts/library/utils.ts#LL87C5-L87C5

To update only the version we can also use npm version as workspace command
npm version <newversion> -m "Version after Milestone XY" --workspaces --include-workspace-root