クイックスタートプロジェクトとの主な違い
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でプロジェクトに含める（バンドルする）ようにしています。
.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の内容が、ビルドで出力されたファイルに含まれるようになります。
（上：P002-bundle-dist/styles.bundle.js、下：P002-bundle-dist/scripts.bundle.js）
出力された内容をWebサーバーに配置してブラウザーで読み込むと、図4のように表示されます。実装の詳細はサンプルコードを参照してください。なお、サンプルコードには、もとのプロジェクト（P002-bundle）と、プロジェクトのビルド結果を簡易Webサーバーで表示できるサンプル（P002-bundle-dist）を含んでいます。
