95. エラーメッセージの解剖 — NGコードとスタックトレース

Angularの実行時エラーには NG0100 のような固有コードが付き、番号帯でおおよその分類が分かります。NG01xx はテンプレートや変更検知まわり、NG02xx は依存性の注入(DI)まわりが代表例です。長いメッセージを全部読む前に、まずコードを見て「どの領域の問題か」に当たりを付けるのが解剖の第一歩です。

エラーの下に続くスタックトレースは、上から「エラーが起きた場所 → その呼び出し元」の順に並びます。大半の行は Angular 内部のファイルなので全部読む必要はなく、src/app 配下など「自分の書いたファイル名」が出ている行を探します。そこがエラーに至った自分のコードの入口で、実務ではこの行から調査を始めます。

初学者はメッセージの長さに圧倒されて、最初の1行すら読まずに閉じてしまいがちです。実は最初の1行とNGコードにほぼ答えがあります。angular.dev/errors/NG0100 のようにコードをURLに付ければ公式の解説と典型的な原因へ直接たどり着けるので、闇雲にエラー文全体で検索する前にまずここを引きましょう。

サンプルコード(フレームワーク環境が必要なため表示のみ)

// 実際のエラー表示を解剖してみる(コンソールに出る例)
//
// ERROR RuntimeError: NG0201: No provider found for _HttpClient!
// ^^^^^ ①最初の1行にほぼ答えがある
//   NG0201     … エラーコード。NG02xx なので DI まわりの問題
//   No provider … HttpClient を注入したいのに提供元が登録されていない
//
//     at throwProviderNotFoundError (core.mjs:5643)   ← Angular内部
//     at getOrCreateInjectable (core.mjs:4110)        ← Angular内部
//     at UserList_Factory (user-list.ts:12)           ← ②自分のファイル!
// ^^^^^ スタックトレースは src/app 配下の行だけ探せばよい
//
// ③コードで公式解説を引く:
//   https://angular.dev/errors/NG0201 を開く
//   → app.config.ts に provideHttpClient() を足すのが典型的な直し方
//
// 番号帯の代表例:
//   NG01xx … テンプレート・変更検知(例: NG0100)
//   NG02xx … 依存性の注入(例: NG0200 循環依存, NG0201 provider不足)
//   NG8xxx … コンパイル時のテンプレートエラー(例: NG8001 未知のタグ)

サンプルコードで身につける(5本) →

学んだ概念を、素朴な例から実務寄りの例まで5つの具体例で確認します。

公式ドキュメントで詳しく ↗