4. 起動の流れ — index.htmlからAppが表示されるまで

ブラウザに画面が出るまでの道筋は一本道です。まずブラウザが src/index.html を読み込みます。bodyには <app-root></app-root> という見慣れないタグが1つあるだけです。次に main.ts が実行され、bootstrapApplication(App, appConfig) がアプリを起動します。すると App コンポーネントが <app-root> の位置に描画され、画面が表示されます。

この流れを知っておくと、実務で「アプリ全体に関わる設定はどこに書くのか」が分かるようになります。全体設定は appConfig(app.config.ts)へ、最初に出す画面の内容は App コンポーネントへ、という置き場所の判断は、すべてこの起動の一本道が基準になるからです。

初学者が驚くのは「HTMLがほぼ空」なことです。画面の中身はすべてコンポーネントがJavaScriptで描いているので、index.html を編集しても画面はほとんど変わりません。表示を変えたければ app.html を編集する、とまず覚えましょう。

サンプルコード(フレームワーク環境が必要なため表示のみ)

// src/main.ts — アプリを起動する入口のファイル
import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { App } from './app/app';

// App コンポーネントを、appConfig の設定付きで起動する。
// index.html の <app-root> の位置に App が描画される
bootstrapApplication(App, appConfig)
  .catch((err) => console.error(err));

// 起動の一本道:
// index.html の <app-root> → main.ts の bootstrapApplication
// → App コンポーネントが描画される

サンプルコードで身につける(5本) →

学んだ概念を、素朴な例から実務寄りの例まで5つの具体例で確認します。

公式ドキュメントで詳しく ↗