如果无法更新angular/cli并尝试使用ng new时会出现错误

3 年 ago

韵, 科

3 minutes

很久没碰Angular了，我想要重新接触它，
我想要更新@angular/cli，但在此过程中遇到了一些问题，
所以我将把这个过程记录下来。

总结

npm cache clear -f しないといけなかった

环境

Node.js v16.10.0 (nodenvで管理)

我打算做的事情(wo3 da3suan4 zuo4 de shi4qing)

数年ぶりにチュートリアルのツアー・オブ・ヒーローズを実施

首先是cli的更新。

首先，由于@angular/cli版本过旧，我尝试使用以下命令进行更新。

npm uninstall -g @angular/cli
npm i -g @angular/cli@latest

立即创建新的 ng 项目

我认为这样做可以进行更新，然后我执行了ng new，但出现了以下错误。

错误消息

% ng new angular-tour-of-heroes   
? What name would you like to use for the new workspace and initial project? p
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS
⠏ Installing packages (npm)...npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: p@0.0.0
npm ERR! Found: jasmine-core@3.7.1
npm ERR! node_modules/jasmine-core
npm ERR!   dev jasmine-core@"~3.7.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer jasmine-core@">=3.8" from karma-jasmine-html-reporter@1.7.0
npm ERR! node_modules/karma-jasmine-html-reporter
npm ERR!   dev karma-jasmine-html-reporter@"^1.5.0" 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! See /Users/hashito/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/hashito/.npm/_logs/2021-07-13T11_51_15_412Z-debug.log
✖ Package install failed, see above.
The Schematic workflow failed. See above.

这是什么东西？
发帖者陷入恐慌。

查看cli的版本

暫時冷靜下來，先確認一下 CLI 的版本吧。

% ng v
     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 9.~~
Node: 16.10.0

哎呀？
明明已经应该是最新的13版本了，为什么还不是呢？
刚刚刷新过，为什么会这样呢？

Reason

當我進行調查時，發現 npm 的快取是原因。

所以，为了安全起见，我重新安装了 @angular/cli，并执行了以下命令。

% npm uninstall -g @angular/cli
% npm cache clean -f
% npm i -g @angular/cli@latest

然后，再次确认版本。

% ng v
     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 13.1.2
Node: 16.10.0
Package Manager: npm 7.24.0
OS: darwin x64

Angular: undefined
... 

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1301.2 (cli-only)
@angular-devkit/core         13.1.2 (cli-only)
@angular-devkit/schematics   13.1.2 (cli-only)
@schematics/angular          13.1.2 (cli-only)

是的，更新已經順利完成，現在我們會重新進行 ng new。

% ng new angular-tour-of-heroes
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS
CREATE angular-tour-of-heroes/README.md (1065 bytes)
CREATE angular-tour-of-heroes/.editorconfig (274 bytes)
CREATE angular-tour-of-heroes/.gitignore (620 bytes)
CREATE angular-tour-of-heroes/angular.json (3135 bytes)
CREATE angular-tour-of-heroes/package.json (1086 bytes)
CREATE angular-tour-of-heroes/tsconfig.json (863 bytes)
CREATE angular-tour-of-heroes/.browserslistrc (600 bytes)
CREATE angular-tour-of-heroes/karma.conf.js (1439 bytes)
CREATE angular-tour-of-heroes/tsconfig.app.json (287 bytes)
CREATE angular-tour-of-heroes/tsconfig.spec.json (333 bytes)
CREATE angular-tour-of-heroes/.vscode/extensions.json (130 bytes)
CREATE angular-tour-of-heroes/.vscode/launch.json (474 bytes)
CREATE angular-tour-of-heroes/.vscode/tasks.json (938 bytes)
CREATE angular-tour-of-heroes/src/favicon.ico (948 bytes)
CREATE angular-tour-of-heroes/src/index.html (305 bytes)
CREATE angular-tour-of-heroes/src/main.ts (372 bytes)
CREATE angular-tour-of-heroes/src/polyfills.ts (2338 bytes)
CREATE angular-tour-of-heroes/src/styles.css (80 bytes)
CREATE angular-tour-of-heroes/src/test.ts (745 bytes)
CREATE angular-tour-of-heroes/src/assets/.gitkeep (0 bytes)
CREATE angular-tour-of-heroes/src/environments/environment.prod.ts (51 bytes)
CREATE angular-tour-of-heroes/src/environments/environment.ts (658 bytes)
CREATE angular-tour-of-heroes/src/app/app-routing.module.ts (245 bytes)
CREATE angular-tour-of-heroes/src/app/app.module.ts (393 bytes)
CREATE angular-tour-of-heroes/src/app/app.component.css (0 bytes)
CREATE angular-tour-of-heroes/src/app/app.component.html (23364 bytes)
CREATE angular-tour-of-heroes/src/app/app.component.spec.ts (1121 bytes)
CREATE angular-tour-of-heroes/src/app/app.component.ts (226 bytes)
✔ Packages installed successfully.

还剩下的只是动它而已

% cd angular-tour-of-heroes
% ng serve -o

是的，顺利搬迁了。

总结

npm を再インストールした時は、cache に注意