Ionic3に入門してみる～その4 Angular4チュートリアル②～

ヒーローエディター

heroes コンポーネントを作成する

Angularでのコマンドは下記。

ng generate component heroes
これに対応するionicコマンドは下記。
ionic generate component heroes

実行してみると下記のようにheroesフォルダができているのがわかる。

heroes.component.tsではなく、heroes.tsというファイル名で作成されるようだ。

CLIは3つのメタデータプロパティを生成しました:

1. selector— コンポーネントのCSS要素セレクタ
2. templateUrl— コンポーネントのテンプレートファイルの場所
3. styleUrls— コンポーネントのプライベートCSSスタイルの場所

ionicで作成されたtsファイルでは、styleUrlsは指定されていませんでした。
自分で指定しなければダメなのでしょうか？
答えはNoのようです。
https://github.com/ionic-team/ionic-cli/issues/1196
少し古いですが、ここのやり取りを見る限り、ionicは暗黙的にhtmlなどと同階層にあるscssファイルをビルド時に取り込むようです。
後ほど少し試してみましょう。

ここのAngular4のチュートリアルと違って、いくつかionicでは変更する箇所があるので、解説。
理論や理屈は置いておいて、下記のように設定してみてください。(赤線部分を注意してみてください。)

ここまでやってあげると、下記のように表示されると思います。

Angular4チュートリアルには、上記の変更のうち、app.module.tsに対する変更が載っていません。(このページの後ろの方で出てきます)
そこでは、下記のように書かれていました。

アプリケーションが動作したのは、Angular CLI がHeroesComponentを生成したときに、AppModuleでそのコンポーネントの宣言を行っていたからです。
src/app/app.module.tsを開き、先頭付近でHeroesComponentがインポートされているのを見つけてください。

つまり、ionicとAngularのCLIで動作が違う？(ホント？)のですね。
とは言ってもAngularの方に動作が統一されるような気もするので一応この記事を書いているときのionicのversionを載せておきます。

ionic　-version
3.20.0

一旦長くなったのでここまで。
次回も同じ章を読んでいきます。