はじめに

普段から仕事でAngularを使っています。最近、設定ファイルをいじる機会が増えてきました。また、公式にワークスペースとプロジェクトのファイル構造のページがありますが、私の環境だと少し異なっていました。
どのファイルが何をしているのかを自分の中でまとめた備忘録として記録します。

環境

以下の環境を使用し、プロジェクトを作成しました。
MacBookPro Monterey M1
npm: 8.6.0
Angular CLI: 13.3.1
Node: 12.22.11

プロジェクト作成の設定

デフォルトの設定でプロジェクトを作成しました。

プロジェクトの作成

% ng new my-app

% Would you like to add Angular routing? (y/N)  // N
% Which stylesheet format would you like to use? (Use arrow keys) // CSS

プロジェクト構成

作成したプロジェクトの構成を確認します。今回はプロジェクト直下にあるファイルとフォルダを説明します。

プロジェクトの中身を確認

% cd my-app
% ls -l
total 1592
-rw-r--r--    1 user.name  staff    1059  6  3 07:53 README.md
-rw-r--r--    1 user.name  staff    3039  6  3 07:53 angular.json
-rw-r--r--    1 user.name  staff    1423  6  3 07:53 karma.conf.js
drwxr-xr-x  601 user.name  staff   19232  6  3 07:54 node_modules
-rw-r--r--    1 user.name  staff  784470  6  3 07:54 package-lock.json
-rw-r--r--    1 user.name  staff    1069  6  3 07:53 package.json
drwxr-xr-x   11 user.name  staff     352  6  3 07:53 src
-rw-r--r--    1 user.name  staff     287  6  3 07:53 tsconfig.app.json
-rw-r--r--    1 user.name  staff     863  6  3 07:53 tsconfig.json
-rw-r--r--    1 user.name  staff     333  6  3 07:53 tsconfig.spec.json

README.md

このプロジェクトの説明や起動方法を書くマークダウン形式のファイル

angular.json

ワークスペース内のすべてのプロジェクトを対象としたCLIのデフォルト設定をします。CLIの使うビルド、サーブ、テストツールの設定オプションを規定します。

karma.conf.js

アプリケーション固有の Karma の設定。Karmaとは、テストコードに対して実行結果を表示するWebサーバーを生成するツールです。Angularだとjamineで書いたテストのカバレッジを表示する際に使用する。

node_modules

npmコマンドでインストールしたnpmパッケージが入るフォルダ。

package-lock.json

npmクライアントが自動で作成するファイル。node_modulesにインストールされたすべてのパッケージのバージョン情報が書かれている。
基本的に自分でいじることはない。

package.json

ワークスペース内の全プロジェクトが利用可能なnpmパッケージの依存関係の設定をします。具体的なフォーマットやファイルの中身についてはnpm documentation を参照してください。
scriptsに起動時のコマンドの省略記法を書ける。

src

アプリケーションのソースファイルが含まれるフォルダ。

tsconfig.app.json

TypeScriptおよびAngularテンプレートコンパイラオプションを含む、アプリケーション固有の TypeScript の設定。

tsconfig.json

ワークスペースのプロジェクトのTypeScriptの基本設定。

tsconfig.spec.json

アプリケーションテスト用の TypeScript の設定。 TypeScriptの設定を参照してください。

参考

おわりに

今回は、Angularのプロジェクト構成について記述しました。実際にそのファイルが何をしているのか、文字に起こすと自分の中でまとまりました。もう少し詳しく書けるようになったら、追記します。