angular-cliでプロジェクト作成した主要なファイルを説明

当セクションではangular-cliの「ng new」コマンドで自動作成されたプロジェクトのスケルトンの主要ファイルについて説明したいと思います。angular-cliでAngular2の開発環境を構築している事が前提となります。angular-cliがセットアップされていない場合は、『Angular2の開発環境を構築（angular-cli）』を参考にしてください。

説明の前に『ng new』コマンドを実行してプロジェクトのファイルを作成します。当セクションでは作業ディレクトリの「C:\ng2test」にsample3のプロジェクトを作成します。コマンドの説明は『Angular-cliのngコマンドの説明』で確認して下さい。

 

フォルダ説明

・distフォルダ

「ng build」コマンドで製品版ビルド結果が出力されるフォルダです。「ng build」コマンドの実行で当該フォルダが作成されます。JavaScriptやCSSなどのファイルをまとめた実行可能なプログラムが出力されます。出力結果をWebサーバーにデプロイして公開します。

・node_moduleフォルダ

npmでインストールされたモジュールが保存されるフォルダです。

・srcフォルダ

TypeScript、HTML、CSSなどのソースファイルが含まれています。

・src/appフォルダ

TypeScript、HTML、CSSなどのソースファイルが含まれています。アプリケーションモジュールとルートコンポーネントが作成されます。

・src/assetsフォルダ

 

・src/environmentsフォルダ

ビルドのオプションで使用される環境設定ファイルを選択します。angular-cli.jsonで環境設定ファイルが定義されています。

・e2eフォルダ

 

ファイル説明

・angular-cli.json

angular-cliの動作を定義するプロジェクトファイル定義。プロジェクト情報定義、アプリケーション情報定義、テスト情報定義、追加JS,CSSファイル定義などを行います。

・package.json

アプリケーションで使用するパッケージやスクリプトを定義するファイルです。

・tslint.json

tslintの解析ルールの定義ファイル。tslintとはTypeScriptのソースコードを静的に解析して構文チェックを行うことで、潜在的な問題を検出してくれるコード品質管理ツールです。

・karma.conf.js

Karmaを使った単体テストに必要な設定ファイル。Karmaとはブラウザ上で単体テストを行う単体テストツールです。

・protractor.conf.js

Protractorのための設定ファイル。Protractorとは、WEBサイトのエンド・トゥー・エンド（E2E）テスト・フレームワークです。

・src/favicon.ico

ファビコンのファイルです。

・src/index.html

アプリケーションの既定のHTMLファイルです。ベースディレクトリ（ルートディレクトリ）やルートコンポーネントが定義されています。また、ビルド結果で出力されるindex.htmlの元ファイルになります。

・src/main.ts

アプリケーションのエントリポイントを示すファイルです（angular-cli.jsonファイルで定義されています）。ソースの中の処理では、実行環境によって製品版モードを有効にして、ブートストラップモジュールをsrc/app/appModule.tsファイルで定義されるAppModuleに定義しています。実行環境はビルドオプションによりangular-cli.jsonで定義されたsrc/environmentsフォルダ中のenvironment.tsとenvironment.prod.tsファイルのenvironmentクラスによって切替がお行われます。

・src/polyfills.ts

Polyfillを実現するためのライブラリを定義します。Polyfillとはレガシーブラウザであってもモダンブラウザと同等の機能を提供する方法のことです。src/main.tsにインポートされています。

・src/styles.css

アプリケーション全体で定義するCSSを記述するファイルです。

・src/tsconfig.json

TypeScriptコンパイラの設定ファイルです。

・src/app/app.module.ts

アプリケーションモジュールとして定義されます。src/main.tsによってブートストラップモジュールに指定されます。

・src/app/app.component.ts

アプリケーションのルートコンポーネントとして定義されます。src/app/app.module.tsによってアプリケーションモジュールのブートストラップモジュールに指定されます。

・src/app/app.component.html

app.component.tsのComponentデコレーターで定義されるルートコンポーネントのHTMLテンプレートファイルです。

・src/app/app.component.css

app.component.tsのComponentデコレーターで定義されるルートコンポーネントのCSS定義ファイルです。