背景
先日Macを購入し、MacでAngularの環境構築していたところ、ng serveの実行エラーで3日ほどハマりました。このエラーは結局解決したのですが解決方法に確証はありません。ですが、同じ原因で詰まっている人がいるかもしれないと思ったため、チェックポイントの一つとして僕が陥ったエラー原因の仮説をここに残します。
環境 (エラー解決前)
- Mac (Version 10.15.7)
- Node.js (15.0.1)
- Angular CLI (11.0.1)
発生したエラー
上記環境でng serveコマンドを打ったところ以下のエラーが出力されました。
ERROR.txt
ERROR in ./src/app/shared/theme/styles.scss (./node_modules/css-
loader/dist/cjs.js??ref--13-1!./node_modules/postcss-loader/src??
embedded!./node_modules/resolve-url-loader??ref--13-
3!./node_modules/sass-loader/dist/cjs.js??ref--13-
4!./src/app/shared/theme/styles.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
Angular導入の前提条件
Angular CLIを導入するためにはNode.jsが必要となりますが、前提条件として "LTS版のNode.js" (2020/11/13時点での最新LTSはv14.15.0) がインストールされていることが必要らしいです。
Angular は Node.js の現行またはアクティブLTS、メンテナンスLTS バージョンを必要とします。
Angular -ローカル環境とワークスペースのセットアップ
Node.jsのバージョン切り替え
僕がインストールしたNode.jsはLTS版ではないv15.0.1であったため、v14.15.0のNode.jsをインストールした後で以下コマンドを打ってNode.jsのバージョンを切り替えました。
nodebrew ls
nodebrew use v14.15.0
node -v
"v14.15.0"と表示されていれば切り替え完了です。LTS版のNode.jsに切り替えた後で(更にゴチャゴチャした後)ng serveコマンドを打つとコンパイルが正常に完了し、ローカル環境のブラウザにページを表示させることができました。
まとめ
エラー原因と解決方法がマッチしていたのかは分かりませんが、公式ドキュメントを見る限りNode.jsバージョンの違いが悪さをしていたことは間違いなさそうです。