【Angular/node.js】ng new しようとしたところ、Node.js version v16.1.0 detected. The Angular CLI requires a minimum Node.js version of either v12.20, v14.15, or v16.10. Please update …で実行できない。

#前提
Angularアプリを新規作成するべく、ng new app-nameのコマンドを打ったところ、下のようなエラーがでました。

Node.js version v16.1.0 detected.
The Angular CLI requires a minimum Node.js version of either v12.20, v14.15, or v16.10.

Please update your Node.js version or visit https://nodejs.org/ for additional instructions.

OS:MacOS BigSur(11.6)
Node.js:nodenv(brew)

試したこと

エラーに書かれている通り、とりあえずnodeのバージョンをv16.10を切り替えてみました。

$ nodenv local 16.1.0

$ nodenv versions

12.2.0
12.18.3
14.15.5
* 16.1.0 (set by /Users/***/angular/.node-version)

再度、ng newしてみるも結果は変わりませんでした。

結論

原因はnode、もしくはnpmのバージョンが新しすぎたのか、原因ははっきりしていません。
npm install -g @angular/cliを実行すると、このようなメッセージが出ていましたが、見落としていました。

npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE package: '@angular/cli@13.0.4',
npm WARN EBADENGINE required: {
npm WARN EBADENGINE node: '^12.20.0 || ^14.15.0 || >=16.10.0',
npm WARN EBADENGINE npm: '^6.11.0 || ^7.5.6 || >=8.0.0',
npm WARN EBADENGINE yarn: '>= 1.13.0'
npm WARN EBADENGINE },
npm WARN EBADENGINE current: { node: 'v16.1.0', npm: '8.2.0' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE package: '@angular-devkit/architect@0.1300.4',
npm WARN EBADENGINE required: {
npm WARN EBADENGINE node: '^12.20.0 || ^14.15.0 || >=16.10.0',
npm WARN EBADENGINE npm: '^6.11.0 || ^7.5.6 || >=8.0.0',
npm WARN EBADENGINE yarn: '>= 1.13.0'
npm WARN EBADENGINE },
npm WARN EBADENGINE current: { node: 'v16.1.0', npm: '8.2.0' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE package: '@angular-devkit/core@13.0.4',
npm WARN EBADENGINE required: {
npm WARN EBADENGINE node: '^12.20.0 || ^14.15.0 || >=16.10.0',
npm WARN EBADENGINE npm: '^6.11.0 || ^7.5.6 || >=8.0.0',
npm WARN EBADENGINE yarn: '>= 1.13.0'
npm WARN EBADENGINE },
npm WARN EBADENGINE current: { node: 'v16.1.0', npm: '8.2.0' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE package: '@angular-devkit/schematics@13.0.4',
npm WARN EBADENGINE required: {
npm WARN EBADENGINE node: '^12.20.0 || ^14.15.0 || >=16.10.0',
npm WARN EBADENGINE npm: '^6.11.0 || ^7.5.6 || >=8.0.0',
npm WARN EBADENGINE yarn: '>= 1.13.0'
npm WARN EBADENGINE },
npm WARN EBADENGINE current: { node: 'v16.1.0', npm: '8.2.0' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE package: '@schematics/angular@13.0.4',
npm WARN EBADENGINE required: {
npm WARN EBADENGINE node: '^12.20.0 || ^14.15.0 || >=16.10.0',
npm WARN EBADENGINE npm: '^6.11.0 || ^7.5.6 || >=8.0.0',
npm WARN EBADENGINE yarn: '>= 1.13.0'
npm WARN EBADENGINE },
npm WARN EBADENGINE current: { node: 'v16.1.0', npm: '8.2.0' }
npm WARN EBADENGINE }

現在のバージョンが、

current: { node: 'v16.1.0', npm: '8.2.0' }

であり、どうもnpmのバージョンがサポート外のようでした。

npm: '^6.11.0 || ^7.5.6 || >=8.0.0'

というわけで、npmのバージョンを下げるのですが、npmのバージョンはnodeに連動しているらしいので、ひとまずnodeのバージョンを14.15.5に下げます。

nodenv local 14.15.5

再度、

npm install -g @angular/cli
ng new app

したところ、無事にangularアプリが作られました。

#　参考にした記事