コンポーネントの基本コードを理解する (5/6)

これで「app」フォルダ内のものは一通りわかりました。が、これでもまだAngularアプリの全てを見たわけではありません。「app」の外側（プロジェクトフォルダの直下）にある、２つのファイルの働きを知る必要があります。それは、main.tsとindex.htmlです。

main.tsは、アプリケーションにアクセスされたとき最初に実行されるスクリプトです。ここには、下のリストのような処理が書かれています。

（※ちなみに、先ほどenvironmentを削除する説明をしましたが、ここでは未修正の状態のリストで説明をしておきます）

ここでは、まず３つのimport文があります。ここで、計４つのオブジェクトをインポートし使えるようにしています。

bootstrap――起動時に実行する処理を組み込むための関数オブジェクトです。
enableProdMode――正式リリース版かどうかを設定するものです。environmentのproductionがtrueなら、これを実行して正式リリース版として実行します。
AppComponent――既に説明しました。サンプルとして用意してあるコンポーネントです。
environment――先ほど説明しました。environment.tsに用意したオブジェクトですね。

これらのオブジェクトをロードし、それからenvironment.productionをチェックして正式リリース版がどうかを設定します。そして最後に、bootstrap(AppComponent);でAppComponentをブートストラップに設定します。これで、AppComponentが実行されコンポーネントとして利用可能になります。

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。

import { bootstrap } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppComponent, environment } from './app/';

if (environment.production) {
    enableProdMode();
}

bootstrap(AppComponent);