概要
Angular CLIで作成した雛形プロジェクトのフォルダ構成と、主要ファイルの役割を整理する。
Angularプロジェクトには、アプリケーション本体、設定ファイル、ビルド設定、テスト設定、静的ファイルなどが含まれる。どこに何を書くかを理解すると、後続の実装で迷いにくくなる。
ここでは、プロジェクト全体とsrcフォルダ配下の構成を分けて確認する。
この記事の構成
- 対象環境と利用上の注意
本文記載時の環境と現在そのまま利用できない箇所を確認。 - プロジェクト全体のフォルダ構成
プロジェクト全体のフォルダ構成と各要素の役割を整理。 - プロジェクトソースのフォルダ構成
プロジェクトソースのフォルダ構成と各要素の役割を整理。
対象環境と利用上の注意
- 本文記載時の環境
Angular CLI 13.2.0、Node.js 16.13.1、npm 8.3.2、TypeScript 4.5.5、Windows x64で生成したNgModuleベースのプロジェクト構成。 - 確認時期
2026年8月。Angular・npm公式資料を照合して記載内容を見直した。
現行CLIでプロジェクトを再生成した比較検証は行っていない。 - 現在そのまま利用できない箇所
現在のAngular CLIはstandalone APIを標準とし、app.config.tsなどを使う。
.browserslistrc、karma.conf.js、polyfills.ts、test.ts、environmentsなどは、Angular CLIの版や作成オプションによって生成されない場合がある。
以下の一覧は旧環境の生成例であり、常に存在するファイル一覧ではない。
プロジェクト全体のフォルダ構成
以下、前ページのWebシステム開発
- Angular入門：雛形プロジェクトの作成 > 雛形プロジェクトの作成で作成した雛形プロジェクトtemplate-pj全体のフォルダ構成を確認する。
- 全体のフォルダ構成
ディレクトリ/ファイル名 用途 TEMPLATE-PJ プロジェクトフォルダ。 ┣ .angular ビルドキャッシュの保存場所などに使用されるディレクトリ。 ┣ .vscode VSCodeの各種設定情報を格納するディレクトリ。 ┣ node_modules Node.jsで利用するライブラリとAngularを構成するライブラリを格納するディレクトリ。 ┣ src アプリ本体のプログラムを格納するディレクトリ。
※ 詳細は、下記プロジェクトソースのフォルダ構成参照。┣ .browserslistrc 対象ブラウザを指定する設定ファイル。 ┣ .editorconfig インデントや改行コードなどのコーディングスタイルを指定する設定ファイル。 ┣ .gitignore Git管理の除外対象を指定する設定ファイル。 ┣ angular.json Angular CLIワークスペースのビルド、開発サーバー、テストなどの設定を記述するファイル。利用するビルダーやテストランナーは版・構成によって異なる。 ┣ karma.conf.js 旧環境で生成されたKarmaのテスト設定ファイル。現行CLIでは選択したテストランナーによって存在しない。 ┣ package.json プロジェクト名、スクリプト、依存パッケージと許容するバージョン範囲などを記述するnpmのマニフェスト。Angular CLIでは ng newが生成する。┣ package-lock.json 実際に解決した依存パッケージのツリーとバージョンを記録するロックファイル。 package.jsonより一方的に優先されるのではなく、両方を組み合わせて依存関係を管理し、npm ciではロック内容とpackage.jsonが矛盾するとエラーになる。┣ README.md プロジェクトの説明を記述するファイル。 ┣ tsconfig.json TypeScriptの設定ファイル
TypeScriptに関する他の設定ファイルは全て、この設定ファイルを継承する。┣ tsconfig.app.json TypeScriptおよびAngularのコンパイラオプションなどのアプリケーション固有情報を記述する設定ファイル。 ┗ tsconfig.spec.json アプリケーションテストに関する情報を記述する設定ファイル。
プロジェクトソースのフォルダ構成
以下、前ページのWebシステム開発
- Angular入門：雛形プロジェクトの作成 > 雛形プロジェクトの作成 で作成した雛形プロジェクトtemplate-pjのsrcフォルダ構成を確認する。
- srcフォルダ構成
ディレクトリ/ファイル名 用途 src srcフォルダ ┣ app 開発メインとなるアプリケーションを構成するディレクトリ。 ┣ assets アイコン、画像、動画などの静的コンテンツを配置するディレクトリ。 ┣ environments 実行環境ごとの設定ファイルを配置するディレクトリ。現行CLIでは ng generate environmentsなどで必要に応じて生成する。┣ favicon.ico ファビコンファイル。
※ ブラウザのタイトルバーやブックマークバーに表示される。┣ index.html Angular CLIのビルド設定でアプリケーションのHTMLエントリーポイントとして指定されるファイル。単に名称が indexだからブラウザがAngularの入口として自動認識するわけではない。┣ main.ts Angularアプリケーションを起動するTypeScriptのエントリーポイント。 ┣ polyfills.ts 旧環境でポリフィルを読み込むために生成されたファイル。現行CLIでは angular.jsonのpolyfills設定などで指定し、TypeScriptファイルが生成されない場合もある。┣ styles.scss この例でSCSSを選択したため生成されるアプリケーション全体のスタイルシート。CSSを選択した場合は styles.cssとなる。┗ test.ts 旧環境でKarmaのテスト対象を読み込むために生成されたファイル。現行CLIではテスト構成によって存在しない。
まとめ
- Angularプロジェクトは、ソース、設定、ビルド、テスト関連ファイルで構成される。
- srcはソースコード全体、src/appはアプリケーション本体の実装を配置する中心的なディレクトリとなる。
- assetsは画像などの静的ファイルを配置する場所で、コンポーネントのロジックとは分けて管理。
- package.json、angular.json、tsconfig系の設定ファイルは役割が異なるため、用途を確認してから変更。