Error following angular.io guide (installing dependencies) | Angular Community | Page 1

candid thunder Apr 5, 2024, 2:34 PM

#

Hi all, I'm new to node.js and decided to learn angular by following the guide available here
I've tried searching for solutions myself without success and would appreciate if you would be patient with me since I am still new to this environment

I successfully installed node :

> node -v

v20.12.1

and installed angular

> npm install -g @angular/cli

changed 233 packages in 12s

44 packages are looking for funding
  run `npm fund` for details

However trying to install the dependencies for first-app causes a bunch of errors:

> npm install

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: @angular-devkit/build-angular@17.3.3
npm ERR! Found: protractor@3.3.0
npm ERR! node_modules/protractor
npm ERR!   dev protractor@"^3.3.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peerOptional protractor@"^7.0.0" from @angular-devkit/build-angular@17.3.3
npm ERR! node_modules/@angular-devkit/build-angular
npm ERR!   dev @angular-devkit/build-angular@"^17.3.3" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: protractor@7.0.0
npm ERR! node_modules/protractor
npm ERR!   peerOptional protractor@"^7.0.0" from @angular-devkit/build-angular@17.3.3
npm ERR!   node_modules/@angular-devkit/build-angular
npm ERR!     dev @angular-devkit/build-angular@"^17.3.3" 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!
npm ERR! For a full report see:
npm ERR! C:\Users\<REDACTED_USERNAME>\AppData\Local\npm-cache\_logs\2024-04-05T14_11_17_258Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in: C:\Users\<REDACTED_USERNAME>\AppData\Local\npm-cache\_logs\2024-04-05T14_11_17_258Z-debug-0.log

I'm not too sure on how to resolve these dependency conflicts and attempting to npm install --force causes more warnings to pop up.

This is the package.json included with first-app

{
  "name": "angular.io-example",
  "version": "0.0.0",
  "description": "Example project from an angular.io guide.",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "17.2.4",
    "@angular/common": "17.2.4",
    "@angular/compiler": "17.2.4",
    "@angular/core": "17.2.4",
    "@angular/forms": "17.2.4",
    "@angular/platform-browser": "17.2.4",
    "@angular/platform-browser-dynamic": "17.2.4",
    "@angular/router": "17.2.4",
    "angular-in-memory-web-api": "~0.17.0",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^17.3.3",
    "@angular/cli": "17.2.3",
    "@angular/compiler-cli": "17.2.4",
    "@types/jasmine": "~5.1.0",
    "@types/node": "^16.11.35",
    "copyfiles": "^2.4.1",
    "jasmine-core": "~5.1.0",
    "jasmine-marbles": "~0.9.2",
    "jasmine-spec-reporter": "~7.0.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",
    "protractor": "^3.3.0",
    "ts-node": "~10.9.0",
    "typescript": "~4.9.3"
  }
}

stable thunder Apr 5, 2024, 2:39 PM

#

candid thunder Hi all, I'm new to node.js and decided to learn angular by following the guide ...

Hello remove protractor from the package.json and run npm install once again.

#

That's a deprecated dependancy for e2e testing, it should not be here anymore.

#

@candid thunder where is your project from? I used your link and the protractor version there is 7.0.0 (versus 3.0.0 on your example).

candid thunder Apr 5, 2024, 2:42 PM

#

stable thunder Hello remove protractor from the package.json and run npm install once again.

> npm install

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: angular.io-example@0.0.0
npm ERR! Found: typescript@4.9.5
npm ERR! node_modules/typescript
npm ERR!   dev typescript@"~4.9.3" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer typescript@">=5.2 <5.4" from @angular/compiler-cli@17.2.4
npm ERR! node_modules/@angular/compiler-cli
npm ERR!   dev @angular/compiler-cli@"17.2.4" 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!
npm ERR! For a full report see:
npm ERR! C:\Users\<REDACTED_USERNAME>\AppData\Local\npm-cache\_logs\2024-04-05T14_41_14_796Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in: C:\Users\<REDACTED_USERNAME>\AppData\Local\npm-cache\_logs\2024-04-05T14_41_14_796Z-debug-0.log

stable thunder Apr 5, 2024, 2:43 PM

#

candid thunder ```ps > npm install ``` ``` npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to r...

I'll need an answer to my last question to resolve it: the value from your package.json file are differents from the one available on the website, you even have different versions on some angular packages.

candid thunder Apr 5, 2024, 2:44 PM

#

Apologies, I think I supplied one from when i was modifying the values to see if it works.
This is the one that was included

{
  "name": "angular.io-example",
  "version": "0.0.0",
  "description": "Example project from an angular.io guide.",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "17.2.4",
    "@angular/common": "17.2.4",
    "@angular/compiler": "17.2.4",
    "@angular/core": "17.2.4",
    "@angular/forms": "17.2.4",
    "@angular/platform-browser": "17.2.4",
    "@angular/platform-browser-dynamic": "17.2.4",
    "@angular/router": "17.2.4",
    "angular-in-memory-web-api": "~0.17.0",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "17.2.3",
    "@angular/cli": "17.2.3",
    "@angular/compiler-cli": "17.2.4",
    "@types/jasmine": "~5.1.0",
    "@types/node": "^16.11.35",
    "copyfiles": "^2.4.1",
    "jasmine-core": "~5.1.0",
    "jasmine-marbles": "~0.9.2",
    "jasmine-spec-reporter": "~7.0.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",
    "protractor": "~7.0.0",
    "ts-node": "~10.9.0",
    "typescript": "~4.9.3"
  }
}

stable thunder Apr 5, 2024, 2:45 PM

#

Btw, there is a more modern official tutorial on the new angular.dev documentation website: https://angular.dev/tutorials/first-app

Angular

The web development framework for building modern apps.

candid thunder Apr 5, 2024, 2:46 PM

#

Ok I'll try that Gerome, thank you

#

Is there a guide for me to follow along locally on my own system?

stable thunder Apr 5, 2024, 2:51 PM

#

candid thunder Is there a guide for me to follow along locally on my own system?

This tutorial does, there is a local environment section: https://angular.dev/tutorials/first-app#local-development-environment
It provides a link to a application starter on next page.

Angular

The web development framework for building modern apps.

candid thunder Apr 5, 2024, 2:52 PM

#

Thank you

candid thunder Apr 5, 2024, 8:26 PM

#

stable thunder This tutorial does, there is a local environment section: https://angular.dev/tu...

Hey Gerome, I decided to follow this guide now , but when downloading the source code from here, there's only an src folder in the zip (no package.json etc)