久しぶりに 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 に注意