Getting Started | Angular Challenges

[giscus[bot]]

Getting Started | Angular Challenges

A guide on how to get started with Angular Challenges.

https://angular-challenges.vercel.app/guides/getting-started/

[alifnaiech]

Error typo on Install all dependencies: npm ci

[alifnaiech]

Is it necessary to use "npm i" instead of "npm ci"? When I tried running "npm ci," I encountered errors. Is "npm ci" an alternative to "npm i"?

[caiosimas]

This error occurred to me:

npm cican only install packages when your package.json and package-lock.json or npm-shrinkwrap.json are in sync. Please update your lock file withnpm install` before continuing.
npm ERR!
npm ERR! Missing: babel-plugin-macros@3.1.0 from lock file
npm ERR! Missing: cosmiconfig@7.1.0 from lock file
npm ERR! Missing: yaml@1.10.2 from lock file
npm ERR!
npm ERR! Clean install a project
npm ERR!
npm ERR! Usage:
npm ERR! npm ci

But npm i got it right

[GEugene98]

This is your first challenge 😁

[prakash-liferay]

Update your nodejs to latest version then run npm ci

[olayeancarh]

If anyone is still experiencing this issue, run "npm i" first then "npm ci".
The error is due to a mismatch between you package-lock.json and package.json file.
"npm i" will update package-lock.json to match what is in package.json

[Gw0zdziu]

I have problem with nx server for e.g. npx nx serve angular-projection
Before i used npm ci command.

Could not find 'nx' module in this workspace. Error: [readCachedProjectGraph] ERROR: No cached ProjectGraph is available.

If you are leveraging \`readCachedProjectGraph()\` directly then you will need to refactor your usage to first ensure that
the ProjectGraph is created by calling \`await createProjectGraphAsync()\` somewhere before attempting to read the data.

If you encounter this error as part of running standard \`nx\` commands then please open an issue on https://github.com/nrwl/nx
    at readCachedProjectGraph (/Users/przemyslawgwozdz/Documents/Repos/Learning/Angular/angular-challenges/node_modules/nx/src/project-graph/project-graph.js:30:15)
    at run (/Users/przemyslawgwozdz/Documents/Repos/Learning/Angular/angular-challenges/node_modules/nx/src/command-line/run/run.js:152:69)
    at process.<anonymous> (/Users/przemyslawgwozdz/Documents/Repos/Learning/Angular/angular-challenges/node_modules/nx/bin/run-executor.js:59:48)
    at process.emit (node:events:519:28)
    at emit (node:internal/child_process:951:14)
    at process.processTicksAndRejections (node:internal/process/task_queues:83:21)

 ——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————

 >  NX   Running target serve for project angular-projection failed

   Failed tasks:
   
   - angular-projection:serve:development
   
   Hint: run the command with --verbose for more details.

[sanketmaru]

Faced issue where dependencies didn't installed with Node 14.
Good to update the documentation to have latest version of node installed.

[t1m4lc]

@alifnaiech i think you dont know the difference between npm i and npm ci ^^
https://stackoverflow.com/questions/52499617/what-is-the-difference-between-npm-install-and-npm-ci

[pookdeveloper]

Error executing the npm ci command:

npm ERR! code 1
npm ERR! path C:\dev\david\angular-challenges\node_modules\nx
npm ERR! command failed
npm ERR! command C:\Windows\system32\cmd.exe /d /s /c node ./bin/post-install
npm ERR! C:\dev\david\angular-challenges\node_modules\nx\src\native\index.js:244
npm ERR! throw loadError
npm ERR! ^
npm ERR!
npm ERR! Error: Cannot find module '@nx/nx-win32-x64-msvc'
npm ERR! Require stack:
npm ERR! - C:\dev\david\angular-challenges\node_modules\nx\src\native\index.js
npm ERR! - C:\dev\david\angular-challenges\node_modules\nx\src\hasher\node-task-hasher-impl.js
npm ERR! - C:\dev\david\angular-challenges\node_modules\nx\src\hasher\task-hasher.js
npm ERR! - C:\dev\david\angular-challenges\node_modules\nx\src\hasher\hash-task.js
npm ERR! - C:\dev\david\angular-challenges\node_modules\nx\src\tasks-runner\run-command.js
npm ERR! - C:\dev\david\angular-challenges\node_modules\nx\src\nx-cloud\utilities\get-cloud-options.js
npm ERR! - C:\dev\david\angular-challenges\node_modules\nx\bin\post-install.js
npm ERR! at Module._resolveFilename (node:internal/modules/cjs/loader:1142:15)
npm ERR! at Module._load (node:internal/modules/cjs/loader:983:27)
npm ERR! at Module.require (node:internal/modules/cjs/loader:1230:19)
npm ERR! at require (node:internal/modules/helpers:179:18)
npm ERR! at Object. (C:\dev\david\angular-challenges\node_modules\nx\src\native\index.js:66:29)
npm ERR! at Module._compile (node:internal/modules/cjs/loader:1368:14)
npm ERR! at Module._extensions..js (node:internal/modules/cjs/loader:1426:10)
npm ERR! at Module.load (node:internal/modules/cjs/loader:1205:32)
npm ERR! at Module._load (node:internal/modules/cjs/loader:1021:12)
npm ERR! at Module.require (node:internal/modules/cjs/loader:1230:19) {
npm ERR! code: 'MODULE_NOT_FOUND',
npm ERR! requireStack: [
npm ERR! 'C:\dev\david\angular-challenges\node_modules\nx\src\native\index.js',
npm ERR! 'C:\dev\david\angular-challenges\node_modules\nx\src\hasher\node-task-hasher-impl.js',
npm ERR! 'C:\dev\david\angular-challenges\node_modules\nx\src\hasher\task-hasher.js',npm ERR! 'C:\dev\david\angular-challenges\node_modules\nx\src\hasher\hash-task.js',
npm ERR! 'C:\dev\david\angular-challenges\node_modules\nx\src\tasks-runner\run-command.js',
npm ERR! 'C:\dev\david\angular-challenges\node_modules\nx\src\nx-cloud\utilities\get-cloud-options.js',
npm ERR! 'C:\dev\david\angular-challenges\node_modules\nx\bin\post-install.js'
npm ERR! ]
npm ERR! }
npm ERR!
npm ERR! Node.js v21.7.3

npm ERR! A complete log of this run can be found in: C:\Users\ddgs\AppData\Local\npm-cache_logs\2024-04-17T06_03_22_848Z-debug-0.log

[tomalaforge]

WHat is your node version and npm version?

[pookdeveloper]

PS C:\dev\david\angular-challenges> node -v
v21.7.3
PS C:\dev\david\angular-challenges> npm --version
10.5.0

[tomalaforge]

Did you try to delete your node-module?
otherwise if it's still not working, delete package-lock and do npm i

[RafiaUmar]

Hurrah I did the first challenge by running npm i😂
mac@RafiaMac angular-challengesbyRafia % npm i --legacy-peer-deps --force
npm WARN using --force Recommended protections disabled.
npm WARN deprecated abab@2.0.6: Use your platform's native atob() and btoa() methods instead
npm WARN deprecated domexception@4.0.0: Use your platform's native DOMException instead
(node:11821) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 close listeners added to [TLSSocket]. Use emitter.setMaxListeners() to increase limit
(Use node --trace-warnings ... to show where the warning was created)

angular-challenges@0.0.0 prepare
husky install

husky - Git hooks installed

added 2294 packages, and audited 2295 packages in 5m

341 packages are looking for funding
run npm fund for details

3 vulnerabilities (1 low, 2 moderate)

To address all issues, run:
npm audit fix --force

Run npm audit for details.

[Atikul789]

finally npm run start command to run the server

[Kiran6248]

I am getting this error while running npm run start. Can somebody help?
NX Failed to process project graph. Run "nx reset" to fix this. Please report the issue if you keep seeing it.

Pass --verbose to see the stacktraces.

[tomalaforge]

did you run nx reset?

[Kiran6248]

I did. I was showing nx not found.

[Kiran6248]

Ok. Thanks

…

On Wed, 26 Jun 2024, 07:42 Prakash Kumar Sah, ***@***.***> wrote: Update your nodejs to latest version then run npm ci — Reply to this email directly, view it on GitHub <#255 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AQ5KOIDAH7H56D6QHKQ4LNDZJJPFRAVCNFSM6AAAAAA7GWGJE6VHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4TQNZYHA2DM> . You are receiving this because you commented.Message ID: <tomalaforge/angular-challenges/repo-discussions/255/comments/9878846@ github.com>

[imjaydeepvaghela]

NX Could not find Nx modules in this workspace. I've tried every way but unable to fix. Please help!

[imjaydeepvaghela]

Now it is done.

[shweta-k2020]

Getting error while installing node modules

C:\Users\Admin\Downloads\angular-challenges-main>npm i
npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: angular-challenges@0.0.0
npm error Found: cypress@14.0.0
npm error node_modules/cypress
npm error dev cypress@"14.0.0" from the root project
npm error
npm error Could not resolve dependency:
npm error peer cypress@"^12.0.0 || ^13.0.0" from @testing-library/cypress@10.0.1
npm error node_modules/@testing-library/cypress
npm error dev @testing-library/cypress@"10.0.1" 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.
npm error
npm error
npm error For a full report see:
npm error C:\Users\Admin\AppData\Local\npm-cache_logs\2025-01-28T10_40_48_155Z-eresolve-report.txt
npm error A complete log of this run can be found in: C:\Users\Admin\AppData\Local\npm-cache_logs\2025-01-28T10_40_48_155Z-debug-0.log

[kararkraj]

npm ci --force worked for me.

[tomalaforge]

ok that's weird, I'll fix it but you should not use --force.

[kararkraj]

Actually, I was facing a different error as mentioned in the next comment.

[kararkraj]

Getting this eroror when running npm ci

npm error code ERESOLVE
npm error ERESOLVE could not resolve
npm error
npm error While resolving: @nx/cypress@20.2.0
npm error Found: cypress@14.0.0
npm error node_modules/cypress
npm error   dev cypress@"14.0.0" from the root project
npm error
npm error Could not resolve dependency:
npm error peerOptional cypress@">= 3 < 14" from @nx/cypress@20.2.0
npm error node_modules/@nx/cypress
npm error   dev @nx/cypress@"20.2.0" from the root project
npm error
npm error Conflicting peer dependency: cypress@13.17.0
npm error node_modules/cypress
npm error   peerOptional cypress@">= 3 < 14" from @nx/cypress@20.2.0
npm error   node_modules/@nx/cypress
npm error     dev @nx/cypress@"20.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.
npm error
npm error
npm error For a full report see:
npm error C:\Users\ankar\AppData\Local\npm-cache\_logs\2025-02-06T07_58_16_925Z-eresolve-report.txt
npm error A complete log of this run can be found in: C:\Users\ankar\AppData\Local\npm-cache\_logs\2025-02-06T07_58_16_925Z-debug-0.log

[tomalaforge]

I need to find some time for solving this issue but I have so much work currently 😩

[kararkraj]

Can you guide me to solve the issue?

It is evident that the package @nx/cypress@20.2.0 requires cypress@13.17.0 as optional peer dependency.
And the project uses cypress@14.0.0. Hence, the conflict.

However, I see that it is an optional peer dependency. Even though the error is thrown which is beyond my understanding.

Is my solution a concrete fix or just a temporary patchwork?

[kararkraj]

JFYI, even the @nx/cypress@21.0.0-beta.1 is using cypress version >= 3 < 14.
As seen in package.json here:- https://www.npmjs.com/package/@nx/cypress/v/21.0.0-beta.1?activeTab=code

[tomalaforge]

@kararkraj This is fixed, you can now pull the latest change and npm ci should work perfectly

[kararkraj]

Hmmm, I am still encountering this error.
Anyways, I am also able to proceed with the challenges.
Thank you.

[attilacsanyi]

Only pnpm i works for me, npm i errors out version: v20.10.0.

➜  angular-challenges git:(main) ✗ npm i --legacy-peer-deps --force
...
npm error code 1
npm error path /Users/.../angular-challenges/node_modules/cypress
npm error command failed
npm error command sh -c node index.js --exec install
npm error node:internal/modules/cjs/loader:452
npm error       throw err;
npm error       ^
npm error