angular/cli が update できなくて ng new するとエラーになる

久しぶりに 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
- 数年ぶりにチュートリアルの ツアー・オブ・ヒーローズ を実施

https://angular.jp/tutorial

# まずは 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
```

はい、無事に動きました。

![Screen Shot 2021-12-28 at 8.03.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399610/14d675a4-da84-07cf-4362-e437a159863c.png)

# まとめ
- npm を 再インストールした時は、cache に注意