Renovate fails to update Angular due to incompatible zone.js version

[rhuitl]

Reproducer

https://github.com/rhuitl/renovatebot-angular

How are you running Renovate?

Self-hosted Renovate

If you're self-hosting Renovate, tell us which platform (GitHub, GitLab, etc) and which version of Renovate.

GitHub

Please tell us more about your question or problem

At the moment, Renovate fails to submit a working PR that updates Angular. I'm fairly confident it fails for everybody at this time.

You'll see a PR that contains updates to
@angular/* from e.g. version 18.2.0 to 18.2.12
zone.js from ~0.14.10 to ~0.15.0

The problem is that NPM reports "ERESOLVE unable to resolve dependency tree" because zone.js is a peer dependency of Angular, and needs to be LOWER than version 0.15:

npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: my-app@0.0.0
npm error Found: zone.js@0.15.0
npm error node_modules/zone.js
npm error   zone.js@"~0.15.0" from the root project
npm error
npm error Could not resolve dependency:
npm error peer zone.js@"~0.14.10" from @angular/core@18.2.12
npm error node_modules/@angular/core
npm error   @angular/core@"^18.2.0" from the root project
npm error   peer @angular/core@"18.2.12" from @angular/animations@18.2.12
npm error   node_modules/@angular/animations
npm error     @angular/animations@"^18.2.0" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.

I was wondering if there is a recommended way to deal with this problem. For example, can Renovate update peer dependencies like zone.js to the latest version that is compatible? Or are there any workarounds?

To reproduce this, you can use this package.json where I pinned the Angular version to 18.2.0:

{
  "name": "my-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "=18.2.0",
    "@angular/common": "=18.2.0",
    "@angular/compiler": "=18.2.0",
    "@angular/core": "=18.2.0",
    "@angular/forms": "=18.2.0",
    "@angular/platform-browser": "=18.2.0",
    "@angular/platform-browser-dynamic": "=18.2.0",
    "@angular/router": "=18.2.0",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.10"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "=18.2.0",
    "@angular/cli": "=18.2.0",
    "@angular/compiler-cli": "=18.2.0",
    "@types/jasmine": "~5.1.0",
    "jasmine-core": "~5.2.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "typescript": "~5.5.2"
  }
}

Logs (if relevant)

No response

[github-actions[bot]]

Hi there,

Get your discussion fixed faster by creating a minimal reproduction. This means a repository dedicated to reproducing this issue with the minimal dependencies and config possible.

Before we start working on your issue we need to know exactly what's causing the current behavior. A minimal reproduction helps us with this. Discussions without reproductions are less likely to be converted to Issues.

Please follow these steps:

1. Read our guide on creating a minimal reproduction.
2. Go to our minimal reproduction template repository.
3. Select the Use this template button to create a new repository based on the template.
4. Work on the minimal reproduction in your own repository.
5. Fill out the information in your repository's README.md.
6. Add the link to your reproduction to the first post of your Discussion. If you are not the original author, you can post a new comment with the link.

If you need help with running renovate on your minimal reproduction repository, please refer to our Running Renovate guide.
Good luck,

The Renovate team

[dahaupt]

I have also encountered this problem. I guess there are currently two solutions:

1. Remove zone.js from the angular monorepo grouping (see this comment).
2. Remove zone.js from dependencies in package.json. It will be installed automatically due to the definition as peer dependency in @angular/core. However, I am not sure whether this has any negative impacts.

This seems to be a duplicate of #25282.

[dahaupt]

@rarkins No, I don't think so as the README says:

While still a supported part of Angular, the Angular team strongly discourages using Zone.js outside of Angular application contexts.

In fact, current and future versions of Angular do not depend on the package at all. It will most likely become obsolete in the future.

[rarkins]

In this case we can maybe have something in group:recommended or perhaps a new workarounds:* rule where we try to craft some very specific grouping rules (e.g. put upgrades of zone.js 0.14 to 0.15 in a angular v19 group).

[dahaupt]

[...] TypeScript will not find zone.js if it's not explicitly installed.

@rhuitl We do not import zone.js directly in our application, but I also could not reproduce this. Can this probably be solved by a configuration in tsconfig.json?

[rhuitl]

@dahaupt interesting! My tsconfig.json is

{
	"compilerOptions": {
		"alwaysStrict": true,
		"noImplicitAny": true,
		"noImplicitReturns": true,
		"noImplicitThis": true,
		"noUnusedLocals": true,
		"skipLibCheck": true,
		"target": "es2015",
		"module": "es2020",
		"moduleResolution": "node",
		"esModuleInterop": true,
		"allowJs": false,
		"removeComments": true,
		"forceConsistentCasingInFileNames": true,
		"newLine": "LF",
		"typeRoots": [
			"node_modules/@types"
		],
		"paths": {
			"*": [ "./node_modules/@types/*", "./*"]
		},
		"experimentalDecorators": true,
		"emitDecoratorMetadata": true
	}
}

Is it moduleResolution maybe (I have "type": "module" in package.json)?

[dahaupt]

@rhuitl Sorry for my late reply. I could not reproduce the issue with your provided options. I guess your imports are part of a testing setup?

[rarkins]

@rhuitl could you install the app into https://github.com/rhuitl/renovatebot-angular to reproduce the problem fully?

[rhuitl]

Yes, did that: rhuitl/renovatebot-angular#6

[rarkins]

To solve that one, what if we exclude minor zone.js updates from and regular angular monorepo non-major upgrades?

[rhuitl]

Yes, if that can be configured, it should work:

• Angular minor & patch updates: zone.js patch updates
• Angular major update: zone.js major/minor/patch

What do you in general think about a smarter dependency resolution mechanism that would try to sort out peer dependency conflicts like this one automatically? Is that completely unrealistic given how Renovate interacts with NPM, or could it be done, at least in theory?

[rarkins]

I've created a workaround for this:

zoneJsBreaking: {
    description:
      'Group minor updates of `zone.js` together with major Angular updates.',
    packageRules: [
      {
        description:
          'Separate minor/patch updates of `zone.js` so that patches can be in the angular minor group',
        matchDatasources: ['npm'],
        matchPackageNames: ['zone.js'],
        separateMinorPatch: true,
      },
      {
        description:
          'Massage the group slug to match the Angular monorepo group',
        matchDatasources: ['npm'],
        matchPackageNames: ['zone.js'],
        matchUpdateTypes: ['minor', 'major'],
        groupSlug: 'major-angular-monorepo',
      },
    ],
  },

It results in this: renovate-reproductions/32606#4

Seems to solve the zone.js problem although looks like the CLI packages should be grouped in too?

[dahaupt]

@rarkins The grouping of the CLI packages works fine in our projects.