クイックスタートプロジェクトとの主な違い
Angular CLIで生成したプロジェクトと、従来のクイックスタートプロジェクトとの相違点で、特に注意が必要な内容を以下に示します。
テンプレートやCSSの外部参照
クイックスタートプロジェクトでは、リスト5のように、コンポーネントのテンプレートがtemplate属性でTypeScriptコード内に直接記述されていました。
@Component({ selector: 'my-app', template: `<h1>Hello {{name}}</h1>`, }) export class AppComponent { name = 'Angular'; }
Angular CLIのプロジェクトでは、リスト6のとおり、templateUrl属性でテンプレートファイル(app.component.html)を外部参照するようになりました。なお、デフォルトのCSSファイル(app.component.css)も生成されて、styleUrls属性で外部参照されます。
@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'app'; }
実際の開発において、テンプレートをTypeScriptコードに直接記述することは少ないため、Angular CLIが生成するプロジェクトは、より実際の開発に近い形式になりました。
モジュール依存性解決ツールの変更
クイックスタートプロジェクトでは、モジュールの依存性解決にSystemJSを利用していましたが、Angular CLIのプロジェクトではwebpackを利用するようになりました。そのため、Angular CLIのプロジェクトにはSystemJSの設定ファイルは含まれません。なお、Angular CLIのプロジェクトにはwebpackの設定ファイル(webpack.config.js)も含まれず、設定は後述する.angular-cli.jsonで行います。
プロジェクト全体の設定ファイル
Angular CLIのプロジェクトでは、プロジェクト名やパスなどのプロジェクト全体設定を、.angular-cli.jsonファイルに記述するようになりました。設定項目の詳細は公式ドキュメントで説明されています。
ここでは、前述のwebpackに関連した設定を、図4のサンプルで説明します。このサンプルは、背景色を指定したCSSファイルと、ボタン押下時にAngularのWebページに遷移する処理を記述したJavaScriptファイルを、webpackでプロジェクトに含める(バンドルする)ようにしています。
![図4 CSSやJavaScriptをwebpackでバンドルするサンプル(P002-bundle)](http://cz-cdn.shoeisha.jp/static/images/article/10795/10795_004.png)
.angular-cli.jsonでは、バンドルするCSSファイルをstyles属性に、JavaScriptファイルをscripts属性に指定します。デフォルトではstylesにstyles.cssが指定されており、scriptsは空です。図4のサンプルでは、styles.cssにページの背景色を指定するとともに、ボタン押下時の処理を記述したcustom.jsファイルを作成して、scriptsに追加指定しています。
"apps": [ // アプリ関連設定 { (略) "styles": [ // バンドルするCSSファイル "styles.css" // デフォルトで指定されている ], "scripts": [ // バンドルするJavaScriptファイル "custom.js" // 追加指定 ], (略) ]
リスト7のように設定して「ng build」コマンドでビルドすると、styles.cssやcustom.jsの内容が、ビルドで出力されたファイルに含まれるようになります。
![図5 ビルドで出力されたファイル(上:P002-bundle-dist/styles.bundle.js、下:P002-bundle-dist/scripts.bundle.js)](http://cz-cdn.shoeisha.jp/static/images/article/10795/10795_005.png)
(上:P002-bundle-dist/styles.bundle.js、下:P002-bundle-dist/scripts.bundle.js)
出力された内容をWebサーバーに配置してブラウザーで読み込むと、図4のように表示されます。実装の詳細はサンプルコードを参照してください。なお、サンプルコードには、もとのプロジェクト(P002-bundle)と、プロジェクトのビルド結果を簡易Webサーバーで表示できるサンプル(P002-bundle-dist)を含んでいます。