javascript - 将 NGRX 添加到 Mac OS 上的 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.json

npm i