現象
ig new コマンド実行時
Angular アプリケーション向けの UI コンポーネントライブラリ Ignite UI for Angular を使用した Angular プロジェクトを新規作成する場合、予め「npm install -g igniteui-cli」によって Igunite UI CLI コマンドラインツール ( “ig” コマンド ) をインストールしておき、この ig コマンドを使って以下のように対話形式プロジェクトの新規作成を行なうことができます。
> ig new ? Enter a name for your project: (プロジェクト名) ? Choose framework: Angular ? Choose the type of project: Ignite UI for Angular ? Choose project template: Empty Project ? Choose the theme for the project: Default Generating project structure. √ Project structure generated. ? Choose an action: Complete & Run The project will be created using a Trial version of Ignite UI for Angular. You can always run the upgrade-packages command once it's created. ? Would you like to upgrade to the licensed feed now? Yes ? Choose app host port: 4200 Build started. Installing npm packages Packages installed successfully (以下省略)
ところが、Windows OS 上で上記のとおり ig コマンドを実行した際、環境によっては以下のエラーが発生し、プロジェクトの実行に失敗する場合があります。
Error: Could not find the '@angular-devkit/build-angular:dev-server' builder's node package.
このエラーが発生した際、node_modules フォルダの中身は空か、あるいは幾つか小数の npm パッケージのフォルダが残されているのみとなっています。
npm install または npm ci コマンド実行時
あるいはまた、Ignite UI for Angular を使用している Angular プロジェクトのソースコード一式を、Windows OS 上で取得して、「npm install」または「npm ci」コマンドを実行した際に、以下のエラーが発生する場合があります。
npm WARN cleanup Failed to remove some directories [
npm WARN cleanup [
npm WARN cleanup '...\\node_modules\\igniteui-cli',
npm WARN cleanup [Error: EBUSY: resource busy or locked, rmdir '...\node_modules\igniteui-cli'] {
npm WARN cleanup errno: -4082,
npm WARN cleanup code: 'EBUSY',
npm WARN cleanup syscall: 'rmdir',
npm WARN cleanup path: '...\\node_modules\\igniteui-cli'
npm WARN cleanup }
npm WARN cleanup ],
npm WARN cleanup [
npm WARN cleanup '...\\node_modules\\esbuild',
npm WARN cleanup [Error: EBUSY: resource busy or locked, rmdir '...\node_modules\esbuild'] {
npm WARN cleanup errno: -4082,
npm WARN cleanup code: 'EBUSY',
npm WARN cleanup syscall: 'rmdir',
npm WARN cleanup path: '...\\node_modules\\esbuild'
npm WARN cleanup }
npm WARN cleanup ],
npm WARN cleanup ]
npm ERR! code 1
npm ERR! path ...\node_modules\nx
npm ERR! command failed
npm ERR! command C:\Windows\system32\cmd.exe /d /s /c node ./bin/post-install
npm ERR! ...\node_modules\nx\src\native\index.js:244
npm ERR! throw loadError
npm ERR! ^
npm ERR!
npm ERR! Error: The specified module could not be found.
npm ERR! \\?\...\node_modules\@nx\nx-win32-x64-msvc\nx.win32-x64-msvc.node
npm ERR! at Module._extensions..node (node:internal/modules/cjs/loader:1473:18)
npm ERR! at Module.load (node:internal/modules/cjs/loader:1207:32)
npm ERR! at Module._load (node:internal/modules/cjs/loader:1023:12)
npm ERR! at Module.require (node:internal/modules/cjs/loader:1235:19)
npm ERR! at require (node:internal/modules/helpers:176:18)
npm ERR! at Object.<anonymous> (...\node_modules\nx\src\native\index.js:66:29)
npm ERR! at Module._compile (node:internal/modules/cjs/loader:1376:14)
npm ERR! at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)
npm ERR! at Module.load (node:internal/modules/cjs/loader:1207:32)
npm ERR! at Module._load (node:internal/modules/cjs/loader:1023:12) {
npm ERR! code: 'ERR_DLOPEN_FAILED'
npm ERR! }
npm ERR!
npm ERR! Node.js v20.11.0
npm ERR! A complete log of this run can be found in: C:\Users\...\AppData\Local\npm-cache\_logs\2024-...-debug-0.log
上記エラーの場合も、やはり、node_modules フォルダの中身は空か、あるいは幾つか小数の npm パッケージのフォルダが残されているのみとなっています。
原因
このエラーは、Ignite UI for Angular の npm パッケージのインストール処理時に使用している「nx」npm パッケージについて、Windows OS 環境上で必要とするランタイムライブラリが別途事前インストールされていない場合に発生します。
対処方法
必要とされるランタイムライブラリは、「Microsoft Visual C++ 2015-2022 ランタイム」となります。下記リンク先から、「Microsoft Visual C++ 2015-2022 ランタイム」のインストーラー「VC_redist.x64.exe」をダウンロードし、これを実行して、表示される手順に従ってインストールを済ませます。
https://aka.ms/vs/17/release/vc_redist.x64.exe
下図は「Microsoft Visual C++ 2015-2022 ランタイム」のインストーラー「VC_redist.x64.exe」を実行した様子です。ライセンス状況および使用条件に同意し、「インストール」ボタンをクリックして、インストールを済ませます。
上記手順を実施後は、「ig new」および「npm install」「npm ci」が正常に動作するようになります。