在 Mac OS 上將 NGRX 添加到 angular 應用程序時出現 Node-gyp 重建錯誤

Question

我正在嘗試將 ngrx/store 添加到我的 angular 應用程序中。

Johns-MBP:Frontend johnbell$ npm install @ngrx/store

canvas@1.6.13 install /Users/johnbell/Projects/******/Frontend/node_modules/canvas
node-gyp rebuild

Traceback (most recent call last):
  File "/usr/local/lib/node_modules/npm/node_modules/node-gyp/gyp/gyp_main.py", line 50, in <module>
    sys.exit(gyp.script_main())
  File "/usr/local/lib/node_modules/npm/node_modules/node-gyp/gyp/pylib/gyp/__init__.py", line 554, in script_main
    return main(sys.argv[1:])
  File "/usr/local/lib/node_modules/npm/node_modules/node-gyp/gyp/pylib/gyp/__init__.py", line 547, in main
    return gyp_main(args)
  File "/usr/local/lib/node_modules/npm/node_modules/node-gyp/gyp/pylib/gyp/__init__.py", line 523, in gyp_main
    options.duplicate_basename_check)
  File "/usr/local/lib/node_modules/npm/node_modules/node-gyp/gyp/pylib/gyp/__init__.py", line 139, in Load
    params['parallel'], params['root_targets'])
  File "/usr/local/lib/node_modules/npm/node_modules/node-gyp/gyp/pylib/gyp/input.py", line 2779, in Load
    variables, includes, depth, check, True)
  File "/usr/local/lib/node_modules/npm/node_modules/node-gyp/gyp/pylib/gyp/input.py", line 417, in LoadTargetBuildFile
    build_file_data, PHASE_EARLY, variables, build_file_path)
  File "/usr/local/lib/node_modules/npm/node_modules/node-gyp/gyp/pylib/gyp/input.py", line 1270, in ProcessVariablesAndConditionsInDict
    ProcessConditionsInDict(the_dict, phase, variables, build_file)
  File "/usr/local/lib/node_modules/npm/node_modules/node-gyp/gyp/pylib/gyp/input.py", line 1149, in ProcessConditionsInDict
    variables, build_file)
  File "/usr/local/lib/node_modules/npm/node_modules/node-gyp/gyp/pylib/gyp/input.py", line 1218, in ProcessVariablesAndConditionsInDict
    variables, build_file, 'variables')
  File "/usr/local/lib/node_modules/npm/node_modules/node-gyp/gyp/pylib/gyp/input.py", line 1225, in ProcessVariablesAndConditionsInDict
    expanded = ExpandVariables(value, phase, variables, build_file)
  File "/usr/local/lib/node_modules/npm/node_modules/node-gyp/gyp/pylib/gyp/input.py", line 914, in ExpandVariables
    sys.stderr.write(p_stderr)
TypeError: write() argument must be str, not bytes while trying to load binding.gyp
gyp ERR! configure error 
gyp ERR! stack Error: `gyp` failed with exit code: 1
gyp ERR! stack     at ChildProcess.onCpExit (/usr/local/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:351:16)
gyp ERR! stack     at ChildProcess.emit (events.js:210:5)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:272:12)
gyp ERR! System Darwin 18.7.0
gyp ERR! command "/usr/local/Cellar/node/12.10.0/bin/node" "/usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /Users/johnbell/Projects/SeeMode/Frontend/node_modules/canvas
gyp ERR! node -v v12.13.0
gyp ERR! node-gyp -v v5.0.5
gyp ERR! not ok 
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: canvas@1.6.13 (node_modules/canvas):
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: canvas@1.6.13 install: `node-gyp rebuild`
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: Exit status 1

+ @ngrx/store@8.4.0
removed 21 packages, updated 1 package and audited 21154 packages in 9.319s
found 0 vulnerabilities

以下是正在使用的 angular 版本。

@angular-devkit/architect         0.11.0
@angular-devkit/build-angular     0.803.14
@angular-devkit/build-optimizer   0.803.14
@angular-devkit/build-webpack     0.803.14
@angular-devkit/core              8.3.14
@angular-devkit/schematics        7.1.0
@angular/cdk                      8.2.3
@angular/cli                      8.3.14
@angular/material                 8.2.3
@ngtools/webpack                  8.3.14
@schematics/angular               8.3.14
@schematics/update                0.803.14
rxjs                              6.5.3
typescript                        3.5.3
webpack                           4.39.2

對此的任何想法都會有所幫助。 我正在按照 ngrx 站點上的安裝說明進行操作。 https://ngrx.io/guide/store/install

如果我使用“ng add @ngrx/store”，結果相同

Johns-MBP:Frontend johnbell$ node -v
v12.13.0

Answer 1

我不建議使用ng add命令

在安裝任何東西之前，請嘗試找到像 package-lock.json 或 yarn-lock.json 之類的鎖定文件，然后使用 node_modules 文件夾將其刪除

然后運行

npm cache clean --force

然后用您要安裝和運行的 package 更新您的 package.json

npm i