久しぶりに Angular を触ろうと思って、
@angular/cli を update しようと思ったら多少詰まったので、
記録として残しておきます。

結論

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

環境

PC: MacBook Pro (Intel Core 2016)
OS: macOS Montery12.0.1
@angular/cli v9系
Node.js v16.10.0 (nodenvで管理)

しようとしたこと

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

まずは cli の update

まずは、@angular/cli が古いので、update しようと以下のコマンドを叩きました。

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

いざ ng new

これで update できたと思い、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 の version を確認してみる

とりあえず一旦落ち着いて、cli の version を確認してみることに。

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

Angular CLI: 9.~~
Node: 16.10.0

あれ？
現時点で最新の13系になっているはずなのになっていない？
さっき update したのになんでだろう？

原因

調べてみると、npm の cache が原因でした。

なので、念の為 @angular/cli も再インストールし直して
以下のコマンドを実行しました。

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

そして、もう一度 version を確認。

% 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)

はい、これで無事 update 完了したので、
改めて 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 に注意