Maintain different Angular Versions in one pnpm Workspace

[GregOnNet]

Hey together,

currently, I am working on a demo, setting up a Micro Frontend Environment with Angular 16 and Angular 17, 18 apps.
This repository is about to be used for workshops and webinars.

My idea is to have everything in one repository to simplify code navigation for the workshop attendees.
Since every package uses different versions of the same package, I configured pnpm to let each package have its own lock-file.

# .npmrc
shared-workspace-lockfile = false

The problem

After installing all dependencies with pnpm install, I start the frontends with pnpm -r start.
Unfortunatelly, packages cannot be resolved as expected.

✘ [ERROR] Cannot find package '~\ng-microfrontend\packages\remote-ng-16\node_modules\.pnpm\@angular+com…
│ Did you mean to import [email protected]/node_modules/typescript/lib/typescript.js? [plugin angular-compiler]

Reproduction

• Clone ng-microfrontends
• Run pnpm install
• Run pnpm -r start
• Note that the apps do not start due to an error

Question

• Do I try to misuse pnpm workspaces because maintaining multiple versions of the same package is not supported?
• Is there a way to set up the workspace as described above?

Thanks in advance for any hint. 🙏🏻

Cheers
Gregor

[zkochan]

I would recommend against using shared-workspace-lockfile = false. If angular is supposed to be a peer dependency, then you may use injected dependencies, it will allow to use multiple angular versions in the same workspace.

You could also try using bit components, which have angular component ready to use: https://bit.dev/docs/angular-introduction/

Bit also has multiple angular versions support baked in and it uses pnpm under the hood to manager dependencies.