[Bug]: Angular 14 support #1410

henryruhs · 2022-04-23T07:21:31Z

Version

11

Steps to reproduce

Create brandnew Angular project via ng new with --next flag.

Expected behavior

Nothing to report here...

Actual behavior

At this point there is a dependency conflict:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: @angular-devkit/[email protected]
npm ERR! node_modules/@angular-devkit/build-angular
npm ERR!   dev @angular-devkit/build-angular@"14.0.0-next.11" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer @angular-devkit/build-angular@">=0.1002.4" from [email protected]
npm ERR! node_modules/jest-preset-angular
npm ERR!   dev jest-preset-angular@"11.1.1" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /Users/henry/.npm/eresolve-report.txt for a full report.

Additional context

No response

Environment

System: MacOS
Node: 14

The text was updated successfully, but these errors were encountered:

ghost · 2022-05-03T15:22:11Z

Jup. Just update an existing NX project will also get you this error if you go for Angular 14 now. Not sure if there is a workaround for this other than downgrading to angular 13. And I wonder why devkit hasn't been updated yet either.

ahnpnl · 2022-05-14T22:39:40Z

You can try this now with next tag

henryruhs · 2022-05-15T10:53:29Z

Thanks for the release, unfortunately I have to report that we are not done yet - not sure what piece in the puzzel is causing the issues but at least I can provide a working angular project:

master using angular 14-next.4 and some wild beta releases to get jest working: https://github.com/henryruhs/ngx-crud-playground/tree/master

branch using angular 14-rc.0 and latest jest dependencies - not working: https://github.com/henryruhs/ngx-crud-playground/tree/jest-with-angular-14

on my local machine it feels like a loop and got stucked with super high CPU usage. on the CI there at least some useful warnings and type errors: https://github.com/henryruhs/ngx-crud-playground/runs/6440488572

Option "testURL" was replaced by passing the URL via "testEnvironmentOptions.url".

TypeError: Cannot read property 'html' of undefined

satanTime · 2022-05-15T14:05:28Z

I see the errors above in nx projects only. Pure angular 14 + jest 28 works well.

ahnpnl · 2022-05-15T14:08:22Z

Cannot read html of undefined is because mismatch version between Jest and jest-environment-jsdom

Nx doesn’t have official support for Jest 28 yet so please contact them @henryruhs

henryruhs · 2022-05-15T14:09:46Z

Who said that I'm using nx? Check the dependencies... still using @angular-builders/jest.

ahnpnl · 2022-05-15T14:14:25Z

We have example app which you can try to reproduce your issue https://github.com/thymikee/jest-preset-angular/tree/main/examples Pls don't include any 3rd party tools in your reproduce repo to produce a pure reproduce scenario.

Also I noticed that @angular-builders/jest hasn't officially supported Jest 28 yet.

We now also have Angular 14 example app at https://github.com/thymikee/jest-preset-angular/tree/main/examples/example-app-v14

satanTime · 2022-05-16T06:16:03Z

Ah, then the Nest command should help:

npm update --depth 999 jest-environment-jsdom

satanTime · 2022-05-16T06:51:39Z

In my case the blocker is @types/jest, it blocks jest-matcher-utils@^27.0.0 and doesn't allow jest-environment-jsdom to upgrade to 28.

henryruhs · 2022-05-17T07:42:57Z

@satanTime A temporary solution could be .npmrc file with force=true until the support landed there.

satanTime · 2022-05-17T07:55:44Z

Hi. My bad. It's not because of types. It's because of nx/jest. It locks some jest packets on 27 and it breaks everything. Force flag doesn't help with it.

henryruhs · 2022-06-02T22:03:09Z

For those who need a temporary solution for Angular 14 - I just found it... so the setup file is causing a loop for some reason, the workaround is an empty one. So this is my current setup of ngx-crud-playground as of 03.07.2022:

.npmrc

legacy-peer-deps=true

jest.config.js

module.exports =
{
	preset: 'jest-preset-angular',
	setupFilesAfterEnv:
	[
		'<rootDir>/jest.setup.ts'
	],
	testPathIgnorePatterns:
	[
		'<rootDir>/cypress'
	]
};

jest.setup.ts

// leave it empty

Closes #1410

spyro2000 · 2022-08-11T14:23:51Z

I am sorry, but I still cannot get this resolved, even after

upgrading to Angular 14
upgrading jest to 28.1.3
upgrading @angular-builders/jest to 14.0.0
upgrading jest-preset-angular to 12.2.0
deleting npm cache (npm cache clean --force)
deleting node_modules

npm ERR! Found: [email protected]
npm ERR! node_modules/jest
npm ERR!   dev jest@"^27.5.1" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer jest@">=28" from @angular-builders/[email protected]
npm ERR! node_modules/@angular-builders/jest
npm ERR!   dev @angular-builders/jest@"^14.0.0" from the root project

Here are all my dependencies from my package.json

"dependencies": {
    "@angular/animations": "^14.1.2",
    "@angular/cdk": "^14.1.1",
    "@angular/common": "^14.1.2",
    "@angular/compiler": "^14.1.2",
    "@angular/core": "^14.1.2",
    "@angular/forms": "^14.1.2",
    "@angular/material": "^14.1.1",
    "@angular/material-moment-adapter": "^14.1.1",
    "@angular/platform-browser": "^14.1.2",
    "@angular/platform-browser-dynamic": "^14.1.2",
    "@angular/router": "^14.1.2",
    "@material/layout-grid": "^14.0.0",
    "ag-charts-angular": "^6.1.0",
    "ag-charts-community": "^6.1.0",
    "ag-grid-angular": "^28.1.0",
    "ag-grid-community": "^28.1.0",
    "ag-grid-enterprise": "^28.1.0",
    "d3": "7.6.1",
    "d3-org-chart": "2.6.0",
    "file-saver": "^2.0.5",
    "lodash-es": "^4.17.21",
    "material-design-icons": "^3.0.1",
    "moment": "^2.29.4",
    "moment-timezone": "^0.5.34",
    "ng-let": "^14.0.1",
    "ngx-logger": "^5.0.11",
    "reconnecting-eventsource": "^1.5.1",
    "rxjs": "^7.5.6",
    "tslib": "^2.4.0",
    "xlsx": "^0.18.5",
    "zone.js": "~0.11.7"
  },
  "devDependencies": {
    "@angular-builders/jest": "^14.0.0",
    "@angular-devkit/build-angular": "^14.1.2",
    "@angular-eslint/builder": "^14.0.2",
    "@angular-eslint/eslint-plugin": "^14.0.2",
    "@angular-eslint/eslint-plugin-template": "^14.0.2",
    "@angular-eslint/schematics": "^14.0.2",
    "@angular-eslint/template-parser": "^14.0.2",
    "@angular/cli": "^14.1.2",
    "@angular/compiler-cli": "^14.1.2",
    "@babel/core": "^7.18.10",
    "@compodoc/compodoc": "^1.1.11",
    "@openapitools/openapi-generator-cli": "^2.3.0",
    "@types/d3": "^7.1.0",
    "@types/d3-org-chart": "^2.6.1",
    "@types/file-saver": "^2.0.5",
    "@types/jasmine": "~4.0.3",
    "@types/jest": "^28.1.6",
    "@types/lodash-es": "^4.17.6",
    "@types/node": "^18.7.1",
    "@types/uuid": "^8.3.4",
    "@typescript-eslint/eslint-plugin": "5.33.0",
    "@typescript-eslint/parser": "5.33.0",
    "babel-loader": "^8.2.5",
    "eslint": "^8.21.0",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-jsdoc": "^39.3.6",
    "eslint-plugin-no-unsanitized": "^4.0.1",
    "eslint-plugin-prefer-arrow": "^1.2.3",
    "eslint-plugin-rxjs": "^5.0.2",
    "eslint-plugin-rxjs-angular": "^2.0.0",
    "eslint-plugin-security": "^1.5.0",
    "husky": "^4.3.6",
    "jasmine-core": "~4.3.0",
    "jasmine-spec-reporter": "~7.0.0",
    "jest": "^28.1.3",
    "jest-canvas-mock": "^2.4.0",
    "jest-junit": "^14.0.0",
    "jest-preset-angular": "^12.2.0",
    "lodash": "^4.17.21",
    "prepush-if-changed": "^1.0.8",
    "rimraf": "^3.0.2",
    "ts-jest": "^28.0.7",
    "ts-node": "~10.9.1",
    "typescript": "~4.7.4"
  }

Output from npm doctor

Check                    Value  Recommendation/Notes
npm ping                 ok
npm -v                   ok     current: v8.17.0, latest: v8.17.0
node -v                  ok     current: v16.16.0, recommended: v16.16.0
npm config get registry  ok     using default registry (https://registry.npmjs.org/)
which git                ok     C:\Users\RupertJ\AppData\Local\Programs\Git\cmd\git.EXE
Verify cache contents    ok     verified 45 tarballs

What did I do wrong? :(

ahnpnl · 2022-08-11T14:27:31Z

You are using @angular-builder/jest, which has a dependency on Jest 27.

spyro2000 · 2022-08-12T07:31:53Z

Hello @ahnpnl,

many thanks for your quick reaction. I am not super-experienced with npm, but does the message

npm ERR! Could not resolve dependency:
npm ERR! peer jest@">=28" from @angular-builders/[email protected]`

Not imply, that @angular-builders is referencing for any Jest version >= 28?

How could I resolve this? I tried to downgrade jest (+ types etc.) to v27, but now npm complains again:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: @angular-builders/[email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/jest
npm ERR!   dev jest@"~27.5.1" from the root project
npm ERR!   peer jest@"^27.0.0" from [email protected]
npm ERR!   node_modules/ts-jest
npm ERR!     dev ts-jest@"^27.1.5" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer jest@">=28" from @angular-builders/[email protected]
npm ERR! node_modules/@angular-builders/jest
npm ERR!   dev @angular-builders/jest@"^14.0.0" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/jest
npm ERR!   peer jest@">=28" from @angular-builders/[email protected]
npm ERR!   node_modules/@angular-builders/jest
npm ERR!     dev @angular-builders/jest@"^14.0.0" from the root project

Is there any working combination for Angular 14 which I should use?

ahnpnl · 2022-08-12T08:45:34Z

Hello @ahnpnl,

many thanks for your quick reaction. I am not super-experienced with npm, but does the message
npm ERR! Could not resolve dependency:
npm ERR! peer jest@">=28" from @angular-builders/[email protected]`

@angular-builders/[email protected] requires Jest 28 which you don't have in your package-lock.json. You need to upgrade to Jest 28.

henryruhs · 2022-08-12T08:58:01Z

Don't get me wrong but this is not stackoverflow. The issues has been resolved, if you have problems - this is not the right place.

spyro2000 · 2022-08-12T11:04:40Z

@ahnpnl, thank you. I thought, I did exactly that (upgrade to jest 28, see package.json). So, forget it for now, maybe it's a npm-internal problem, many thanks nevertheless.

Update: Got it resolved by manually deleting package-lock.json + node_modules.
Now the IDE is the only remaining problem: https://bit.ly/3JR1pob :D

henryruhs added Bug Report Needs Triage labels Apr 23, 2022

henryruhs mentioned this issue Apr 23, 2022

Fix Jest preset henryruhs/ngx-crud-playground#7

Closed

ahnpnl added 🚀 Feature Request new suggested feature and removed Bug Report Needs Triage labels Apr 27, 2022

ahnpnl pushed a commit that referenced this issue Jun 3, 2022

feat: support Angular 14

ad3a525

Closes #1410

ahnpnl mentioned this issue Jun 3, 2022

feat: support Angular 14 #1611

Merged

2 tasks

ahnpnl closed this as completed in #1611 Jun 3, 2022

ahnpnl added a commit that referenced this issue Jun 3, 2022

feat: support Angular 14 (#1611)

7c294d7

Closes #1410

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Bug]: Angular 14 support #1410

[Bug]: Angular 14 support #1410

henryruhs commented Apr 23, 2022 •

edited

Loading

ghost commented May 3, 2022 •

edited by ghost

Loading

ahnpnl commented May 14, 2022

henryruhs commented May 15, 2022 •

edited

Loading

satanTime commented May 15, 2022

ahnpnl commented May 15, 2022 •

edited

Loading

henryruhs commented May 15, 2022 •

edited

Loading

ahnpnl commented May 15, 2022 •

edited

Loading

satanTime commented May 16, 2022

satanTime commented May 16, 2022

henryruhs commented May 17, 2022

satanTime commented May 17, 2022

henryruhs commented Jun 2, 2022 •

edited

Loading

spyro2000 commented Aug 11, 2022 •

edited

Loading

ahnpnl commented Aug 11, 2022

spyro2000 commented Aug 12, 2022 •

edited

Loading

ahnpnl commented Aug 12, 2022

henryruhs commented Aug 12, 2022

spyro2000 commented Aug 12, 2022 •

edited

Loading

[Bug]: Angular 14 support #1410

[Bug]: Angular 14 support #1410

Comments

henryruhs commented Apr 23, 2022 • edited Loading

Version

Steps to reproduce

Expected behavior

Actual behavior

Additional context

Environment

ghost commented May 3, 2022 • edited by ghost Loading

ahnpnl commented May 14, 2022

henryruhs commented May 15, 2022 • edited Loading

satanTime commented May 15, 2022

ahnpnl commented May 15, 2022 • edited Loading

henryruhs commented May 15, 2022 • edited Loading

ahnpnl commented May 15, 2022 • edited Loading

satanTime commented May 16, 2022

satanTime commented May 16, 2022

henryruhs commented May 17, 2022

satanTime commented May 17, 2022

henryruhs commented Jun 2, 2022 • edited Loading

.npmrc

jest.config.js

jest.setup.ts

spyro2000 commented Aug 11, 2022 • edited Loading

ahnpnl commented Aug 11, 2022

spyro2000 commented Aug 12, 2022 • edited Loading

ahnpnl commented Aug 12, 2022

henryruhs commented Aug 12, 2022

spyro2000 commented Aug 12, 2022 • edited Loading

henryruhs commented Apr 23, 2022 •

edited

Loading

ghost commented May 3, 2022 •

edited by ghost

Loading

henryruhs commented May 15, 2022 •

edited

Loading

ahnpnl commented May 15, 2022 •

edited

Loading

henryruhs commented May 15, 2022 •

edited

Loading

ahnpnl commented May 15, 2022 •

edited

Loading

henryruhs commented Jun 2, 2022 •

edited

Loading

spyro2000 commented Aug 11, 2022 •

edited

Loading

spyro2000 commented Aug 12, 2022 •

edited

Loading

spyro2000 commented Aug 12, 2022 •

edited

Loading