😓

AngularJSで”ng serve"立ち上げ時のエラー解決

2023/10/10に公開

Angular

エラー

tech

『Angular Signals スタートガイド』、
『Angular と Firebase を使用してウェブアプリケーションを作成する』を行おうとした所、
下記のエラーが出たので、メモとして記載しています。

立ち上げ

ng serve

エラー①：Could not find the '@angular-devkit/build-angular:dev-server' builder's node package.

Node.js version v19.9.0 detected.
Odd numbered Node.js versions will not enter LTS status and should not be used for production. For more information, please see https://nodejs.org/en/about/releases/.
Workspace extension with invalid name (defaultProject) found.
Node packages may not be installed. Try installing with 'npm install'.
Error: Could not find the '@angular-devkit/build-angular:dev-server' builder's node package.

　//Node.js バージョン v19.9.0 が検出されました。
//奇数番号の Node.js バージョンは LTS ステータスにならないため、運用には使用しないでください。詳細については、https://nodejs.org/en/about/releases/ を参照してください。
//無効な名前のワークスペース拡張機能 (defaultProject) が見つかりました。
//Nodeパッケージがインストールされていない可能性があります。 「npm install」でインストールしてみてください。
//エラー: '@angular-devkit/build-angular:dev-server' ビルダーのnodeパッケージが見つかりませんでした。

解決方法

エラー内容が『 '@angular-devkit/build-angular:dev-server' ビルダーのnodeパッケージが見つかりませんでした。』と記載されていました。
『「npm install」でインストールしてみてください。』との事なので、下記のように入力します。

npm install --dev-server @angular-devkit/build-angular

入力すると下記が表示されました。

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: qgnioqqrg.github@0.0.0
npm ERR! Found: @angular-devkit/build-angular@16.2.0-next.1
npm ERR! node_modules/@angular-devkit/build-angular
npm ERR!   dev @angular-devkit/build-angular@"^16.2.0-next.1" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! dev @angular-devkit/build-angular@"^16.2.0-next.1" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: @angular/compiler-cli@16.2.6
npm ERR! node_modules/@angular/compiler-cli
npm ERR!   peer @angular/compiler-cli@"^16.0.0" from @angular-devkit/build-angular@16.2.3
npm ERR!   node_modules/@angular-devkit/build-angular
npm ERR!     dev @angular-devkit/build-angular@"^16.2.0-next.1" 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! 
npm ERR! For a full report see:
npm ERR! /Users/masumi/.npm/_logs/2023-09-25T10_10_07_343Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in: /Users/masumi/.npm/_logs/2023-09-25T10_10_07_343Z-debug-0.log

「this command with --force or --legacy-peer-deps」（このコマンドには --force または --legacy-peer-deps を指定します)」と記載されていたので、「--force」を入力しました。

npm audit fix --force

npm audit

npm auditとは、プロジェクトのディレクトリ内で使用しているnpmパッケージのセキュリティをチェックするコマンドです。プロジェクトの脆弱性をスキャンし、何も修正せずに詳細のみを表示します。
その為、npm auditコマンドを実行して問題のあるパッケージが見つかった場合、通常はパッケージを更新して対応することになります。

--force と --legacy-peer-depsの違い

npm audit fix --forceは指定された依存関係の範囲外のモジュールをインストールできるようにします。強制上書きしてしまうので、グループでの作業での使用や何をしたいのか明確なアイデアがない場合は、このオプションを使用しないほうが良さそうです。

npm audit fix --legacy-peer-depsはpeerDependencyの依存解決をせずにインストールを続行せよというオプションです。ポイントとしてnpmに「追加でなにかをさせる」のではなく「処理（=peerDependencyの解決）をスキップさせる」オプションであるという点です。

そうすると、こちらの内容が表示されました。

npm WARN using --force Recommended protections disabled.

added 957 packages, and audited 958 packages in 15s

105 packages are looking for funding
  run `npm fund` for details

# npm audit report

critters  0.0.17 - 0.0.19
Severity: moderate
Critters Cross-site Scripting Vulnerability - https://github.com/advisories/GHSA-cx3j-qqxj-9597
fix available via `npm audit fix`
node_modules/critters
  @angular-devkit/build-angular  16.1.0-next.0 - 16.1.7 || 16.2.0-next.0 - 16.2.0-rc.1
  Depends on vulnerable versions of critters
  node_modules/@angular-devkit/build-angular

2 moderate severity vulnerabilities

To address all issues, run:
  npm audit fix

npm audit fix

npm audit fixとは、プロジェクトの脆弱性をスキャンし、互換性のある更新を脆弱な依存関係に自動的にインストールします。

再度、ng serveを入力。

ng serve

そうすると、こちらの内容が表示されました。

Node.js version v19.9.0 detected.
Odd numbered Node.js versions will not enter LTS status and should not be used for production. For more information, please see https://nodejs.org/en/about/releases/.
Workspace extension with invalid name (defaultProject) found.
****************************************************************************************
This is a simple server for use in testing or debugging Angular applications locally.
It hasn't been reviewed for security issues.

DON'T USE IT FOR PRODUCTION!
****************************************************************************************
⠋ Generating browser application bundles (phase: setup)...    TypeScript compiler options "target" and "useDefineForClassFields" are set to "ES2022" and "false" respectively by the Angular CLI. To control ECMA version and features use the Browerslist configuration. For more information, see https://angular.io/guide/build#configuring-browser-compatibility
    NOTE: You can set the "target" to "ES2022" in the project's tsconfig to remove this warning.
✔ Browser application bundle generation complete.

Initial Chunk Files   | Names         |  Raw Size | Estimated Transfer Size
main.js               | main          | 653.67 kB |               151.36 kB
styles.css, styles.js | styles        | 226.10 kB |                40.06 kB
runtime.js            | runtime       |   1.23 kB |               667 bytes

                      | Initial Total | 881.00 kB |               192.07 kB

Build at: 2023-09-25T10:11:36.698Z - Hash: c1f650b46ab8466b - Time: 25002ms

Warning: /Users/masumi/Downloads/codelabs-signals-get-started 2/src/main.ts depends on 'zone.js/dist/zone'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

✔ Compiled successfully.
✔ Browser application bundle generation complete.

http://localhost:4200/のページを検索すると・・・。
無事に表示されました！！！

エラー②：This command is not available when running the Angular CLI outside a workspace.

「AngularとFirebaseを使用してウェブアプリケーションを作成する」
を進めていくと下記のエラーが出ました。

Error: This command is not available when running the Angular CLI outside a workspace.

解決方法

エラー内容が『このコマンドは、ワークスペース外で Angular CLI を実行しているときは使用できません』と記載されていました。

①Visual Studio Codeで開きたいファイルを選択して、「開く」を押してファイルを開きます。
②右上の右から３番目（上が白、下が黒に分かれているアイコン）を押すと、下にPROBLEMS(問題)などが出てくるので、TERMINAL（ターミナル）を選択します。

③ターミナルでng serveを入力するとプロジェクトが開かれ、エラーが修正されした。

参考文献

Angular Signals スタートガイド
https://codelabs.developers.google.com/angular-signals?hl=ja#6 (2023/09/29閲覧)
npm Docs
npm-audit
https://docs.npmjs.com/cli/v9/commands/npm-audit　(2023/09/29閲覧)
AngularとFirebaseを使用してウェブアプリケーションを作成する
2.新しいプロジェクトを作成する
https://developers.google.com/codelabs/building-a-web-app-with-angular-and-firebase?hl=ja#1 (2023/10/10閲覧)
stack oveerflow
Error: This command is not available when running the Angular CLI outside a workspace
https://stackoverflow.com/questions/72670696/error-this-command-is-not-available-when-running-the-angular-cli-outside-a-work (2023/10/10閲覧)

立ち上げ

エラー①：Could not find the '@angular-devkit/build-angular:dev-server' builder's node package.

解決方法

エラー②：This command is not available when running the Angular CLI outside a workspace.

解決方法

参考文献

Discussion