libro
www.tuyano.com
初心者のためのAngular2入門

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

作成:2016-08-13 09:40
更新:2016-08-13 09:40

■index.tsとenvironment.ts

これでコンポーネントの基本はわかりましたが、「app」フォルダを見ると、この他にもファイルがあることに気づきます。それは、index.tsenvironment.tsです。

index.tsは、この「app」内のコンポーネントにアクセスがあるときにデフォルトでロードされるものです。ここには、以下のようなexport文が記述されています。
export * from './environment';
export * from './app.component';

これで、environment.tsapp.component.tsが、呼び出している側にエクスポートされ利用できるようになります。つまり、必要なスクリプトファイルを利用できるようにここで設定していたのですね。

environment.tsでは、以下のような単純な処理が用意されています。
export const environment = {
    production: false
};

これで、environmentという定数がエクスポートされています。このenvironmentは、正式公開版かどうかを示すproductionという値を持ったオブジェクトで、このproductionというプロパティの値をtrueにすれば、正式リリース版として扱われるようになっているのです。


■environmentはいらない?

このenvironment.tsは、Angular CLIでプロジェクトを作成すると組み込まれる仕組みで、実はAngularでは必ずないといけないというわけではありません。「こんな仕組み、いらない」という場合は、取り除くこともできます。

1. index.tsを開き、 export * from './environment'; を削除します。

2. main.tsを開き、以下の文を修正する。
import { AppComponent, environment } from './app/';
    
import { AppComponent } from './app/';

3. main.tsにある以下の文を削除する。
if (environment.production) {
    enableProdMode();
}

これで、environement.tsは使われなくなります。削除しても大丈夫です。Angularのサイトにある「5分でAngularアプリを作る」という説明では、このenvironmentはありませんから、心配せずに消してしまってもいいですよ。

※プログラムリストが表示されない場合

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

※関連コンテンツ

「初心者のためのAngular2入門」に戻る