search

PacktPublishing / Reactive-Patterns-with-RxJS-for-Angular

Reactive Patterns with RxJS for Angular, published by Packt
MIT License
64 stars 65 forks source link

Unspecified `node` and `npm` versions #5

Open mindplay-dk opened 1 year ago

mindplay-dk commented 1 year ago

npm install for any of the front-end projects no longer works on current LTS versions of node and/or npm.

The book doesn't specify which version you used.

Your package.json files don't specify any engine versions either.

What do I need to get the code running?

Here's the error output from ng serve:

Compiling @angular/cdk/scrolling : es2015 as esm2015
⠸ Generating browser application bundles (phase: building)...node:internal/crypto/hash:71
  this[kHandle] = new _Hash(algorithm, xofLen);
                  ^

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:71:19)
    at Object.createHash (node:crypto:133:10)
    at BulkUpdateDecorator.hashFactory (/home/mindplay/workspace/Reactive-Patterns-with-RxJS-for-Angular/Chapter04/recipes-book-front/node_modules/webpack/lib/util/createHash.js:145:18)
    at BulkUpdateDecorator.update (/home/mindplay/workspace/Reactive-Patterns-with-RxJS-for-Angular/Chapter04/recipes-book-front/node_modules/webpack/lib/util/createHash.js:46:50)
    at OriginalSource.updateHash (/home/mindplay/workspace/Reactive-Patterns-with-RxJS-for-Angular/Chapter04/recipes-book-front/node_modules/webpack/node_modules/webpack-sources/lib/OriginalSource.js:104:8)
    at NormalModule._initBuildHash (/home/mindplay/workspace/Reactive-Patterns-with-RxJS-for-Angular/Chapter04/recipes-book-front/node_modules/webpack/lib/NormalModule.js:868:17)
    at handleParseResult (/home/mindplay/workspace/Reactive-Patterns-with-RxJS-for-Angular/Chapter04/recipes-book-front/node_modules/webpack/lib/NormalModule.js:934:10)
    at /home/mindplay/workspace/Reactive-Patterns-with-RxJS-for-Angular/Chapter04/recipes-book-front/node_modules/webpack/lib/NormalModule.js:1026:4
    at processResult (/home/mindplay/workspace/Reactive-Patterns-with-RxJS-for-Angular/Chapter04/recipes-book-front/node_modules/webpack/lib/NormalModule.js:743:11)
    at /home/mindplay/workspace/Reactive-Patterns-with-RxJS-for-Angular/Chapter04/recipes-book-front/node_modules/webpack/lib/NormalModule.js:807:5 {
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

Node.js v18.14.2

Installing it didn't immediately work either:

$ npm install
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: recipes-book@0.0.0
npm ERR! Found: rxjs@7.5.4
npm ERR! node_modules/rxjs
npm ERR!   rxjs@"7.5.4" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer rxjs@"^6.5.3" from @angular/core@12.1.5
npm ERR! node_modules/@angular/core
npm ERR!   @angular/core@"~12.1.1" from the root project
npm ERR!   peer @angular/core@"12.1.5" from @angular/animations@12.1.5
npm ERR!   node_modules/@angular/animations
npm ERR!     @angular/animations@"~12.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! 
npm ERR! For a full report see:
npm ERR! /home/mindplay/.npm/_logs/2023-02-28T14_19_12_842Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/mindplay/.npm/_logs/2023-02-28T14_19_12_842Z-debug-0.log

I was able to install using npm install --legacy-peer-deps as it suggests, but with a flood of warnings:

$ npm install --legacy-peer-deps
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@angular-devkit/build-angular@12.1.4',
npm WARN EBADENGINE   required: {
npm WARN EBADENGINE     node: '^12.14.1 || >=14.0.0',
npm WARN EBADENGINE     npm: '^6.11.0 || ^7.5.6',
npm WARN EBADENGINE     yarn: '>= 1.13.0'
npm WARN EBADENGINE   },
npm WARN EBADENGINE   current: { node: 'v18.14.2', npm: '9.5.1' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@angular/cli@12.1.4',
npm WARN EBADENGINE   required: {
npm WARN EBADENGINE     node: '^12.14.1 || >=14.0.0',
npm WARN EBADENGINE     npm: '^6.11.0 || ^7.5.6',
npm WARN EBADENGINE     yarn: '>= 1.13.0'
npm WARN EBADENGINE   },
npm WARN EBADENGINE   current: { node: 'v18.14.2', npm: '9.5.1' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@angular-devkit/architect@0.1201.4',
npm WARN EBADENGINE   required: {
npm WARN EBADENGINE     node: '^12.14.1 || >=14.0.0',
npm WARN EBADENGINE     npm: '^6.11.0 || ^7.5.6',
npm WARN EBADENGINE     yarn: '>= 1.13.0'
npm WARN EBADENGINE   },
npm WARN EBADENGINE   current: { node: 'v18.14.2', npm: '9.5.1' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@angular-devkit/build-optimizer@0.1201.4',
npm WARN EBADENGINE   required: {
npm WARN EBADENGINE     node: '^12.14.1 || >=14.0.0',
npm WARN EBADENGINE     npm: '^6.11.0 || ^7.5.6',
npm WARN EBADENGINE     yarn: '>= 1.13.0'
npm WARN EBADENGINE   },
npm WARN EBADENGINE   current: { node: 'v18.14.2', npm: '9.5.1' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@angular-devkit/build-webpack@0.1201.4',
npm WARN EBADENGINE   required: {
npm WARN EBADENGINE     node: '^12.14.1 || >=14.0.0',
npm WARN EBADENGINE     npm: '^6.11.0 || ^7.5.6',
npm WARN EBADENGINE     yarn: '>= 1.13.0'
npm WARN EBADENGINE   },
npm WARN EBADENGINE   current: { node: 'v18.14.2', npm: '9.5.1' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@angular-devkit/core@12.1.4',
npm WARN EBADENGINE   required: {
npm WARN EBADENGINE     node: '^12.14.1 || >=14.0.0',
npm WARN EBADENGINE     npm: '^6.11.0 || ^7.5.6',
npm WARN EBADENGINE     yarn: '>= 1.13.0'
npm WARN EBADENGINE   },
npm WARN EBADENGINE   current: { node: 'v18.14.2', npm: '9.5.1' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@ngtools/webpack@12.1.4',
npm WARN EBADENGINE   required: {
npm WARN EBADENGINE     node: '^12.14.1 || >=14.0.0',
npm WARN EBADENGINE     npm: '^6.11.0 || ^7.5.6',
npm WARN EBADENGINE     yarn: '>= 1.13.0'
npm WARN EBADENGINE   },
npm WARN EBADENGINE   current: { node: 'v18.14.2', npm: '9.5.1' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@angular-devkit/schematics@12.1.4',
npm WARN EBADENGINE   required: {
npm WARN EBADENGINE     node: '^12.14.1 || >=14.0.0',
npm WARN EBADENGINE     npm: '^6.11.0 || ^7.5.6',
npm WARN EBADENGINE     yarn: '>= 1.13.0'
npm WARN EBADENGINE   },
npm WARN EBADENGINE   current: { node: 'v18.14.2', npm: '9.5.1' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@schematics/angular@12.1.4',
npm WARN EBADENGINE   required: {
npm WARN EBADENGINE     node: '^12.14.1 || >=14.0.0',
npm WARN EBADENGINE     npm: '^6.11.0 || ^7.5.6',
npm WARN EBADENGINE     yarn: '>= 1.13.0'
npm WARN EBADENGINE   },
npm WARN EBADENGINE   current: { node: 'v18.14.2', npm: '9.5.1' }
npm WARN EBADENGINE }
npm WARN deprecated @npmcli/move-file@1.1.2: This functionality has been moved to @npmcli/fs
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated stable@0.1.8: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility
npm WARN deprecated flatten@1.0.3: flatten is deprecated in favor of utility frameworks such as lodash.
npm WARN deprecated source-map-resolve@0.6.0: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated sourcemap-codec@1.4.8: Please use @jridgewell/sourcemap-codec instead
npm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated chokidar@2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
npm WARN deprecated core-js@3.15.1: core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.

added 1347 packages, and audited 1348 packages in 53s

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

11 vulnerabilities (1 low, 1 moderate, 8 high, 1 critical)

To address all issues possible (including breaking changes), run:
  npm audit fix --force

Some issues need review, and may require choosing
a different dependency.

Run `npm audit` for details.

I realize this is a pretty normal experience with any Node project that's been sitting on a shelf for 2 years (or even 6 months) and I'm fine with running older versions of Angular and other dependencies - I have nvm and I'm happy to use outdated tools while learning, but you need to tell me what to install.

I don't want to spend the first couple of days fighting to upgrade all this outdated stuff.

I'm here to learn Angular and RxJS.

Otherwise I'm considering a refund. 😕

everjava commented 1 year ago

I merged package.json from project that works for me with package.json from the Book's project. My conf:

Angular CLI: 15.1.4 Node: 18.14.2 Package Manager: npm 9.4.1

package.json: { "name": "recipes-book", "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": "~13.1.0", "@angular/cdk": "^13.1.0", "@angular/common": "~13.1.0", "@angular/compiler": "~13.1.0", "@angular/core": "~13.1.0", "@angular/forms": "~13.1.0", "@angular/platform-browser": "~13.1.0", "@angular/platform-browser-dynamic": "~13.1.0", "@angular/router": "~13.1.0", "bootstrap": "4.6", "primeflex": "^3.1.3", "primeng": "^13.1.0", "primeicons": "^6.0.1", "quill": "^1.3.7", "rxjs": "~7.5.4", "tslib": "^2.3.0", "zone.js": "~0.11.4" }, "devDependencies": { "@angular-devkit/build-angular": "^13.3.10", "@angular/cli": "^15.2.1", "@angular/compiler-cli": "~13.1.0", "@types/jasmine": "~3.10.0", "@types/node": "^12.11.1", "jasmine-core": "~3.10.0", "karma": "~6.3.0", "karma-chrome-launcher": "~3.1.0", "karma-coverage": "~2.1.0", "karma-jasmine": "~4.0.0", "karma-jasmine-html-reporter": "~1.7.0", "typescript": "~4.5.2" } }

mindplay-dk commented 1 year ago

@everjava nice, I can confirm this works on node 18.14.2. Thanks!

Is font-awesome a required dependency?

mindplay-dk commented 1 year ago

For the record, I removed font-awesome and switched back to primeicons, which is what the book used.

I've created a PR #6 so others can get this running.

Thanks for the help! 🙏

everjava commented 1 year ago

I realized later that font-awesome shouldn't be there and I changed it to "primeicons": "^6.0.1" and I forgot to update here :)

mkreisler63500 commented 1 year ago

I ran into the same issue and solved it by changing the start script in package.json to: "start": "export NODE_OPTIONS=--openssl-legacy-provider; ng serve --proxy-config proxy.config.json"