はじめに
普段から仕事で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のプロジェクト構成について記述しました。実際にそのファイルが何をしているのか、文字に起こすと自分の中でまとまりました。もう少し詳しく書けるようになったら、追記します。