概要
Angularアプリでルートコンポーネントが表示されるまでの読み込み順を、雛形プロジェクトのファイルを例に整理する。
この記事の旧NgModule構成では、index.htmlから始まり、main.ts、AppModule、AppComponentへと処理がつながる。この流れを理解すると、既存アプリケーションの画面がどこから起動しているのかを追いやすくなる。
ここでは、トップページ、スタートアップコード、ルートモジュール、ルートコンポーネントの関係を確認する。
この記事の構成
- 対象環境と利用上の注意
本文記載時の環境と現在そのまま利用できない箇所を確認。 - トップページ（index.html、styles.scss）の読み込み
index.htmlは、アプリケーションのトップページとして最初に読み込まれ、コンポーネントの呼出しは、 セレクターと呼ばれるコンポーネントのキーを要素名とすることで関連付けされる。 - スタートアップコード（main.ts）の読み込み
スタートアップコード（main.ts）の読み込みの意味と要点を具体例から整理。 - ルートモジュール（app.module.ts）の読み込み
app.module.tsで、NgModuleの構成と起動するルートコンポーネントを確認。 - ルートコンポーネント（app.component.ts）の読み込み
ルートコンポーネント（app.component.ts）の読み込みの意味と要点を具体例から整理。 - 現行のstandalone構成
AppModuleを使わず、bootstrapApplicationで起動する現行標準との差を確認。
対象環境と利用上の注意
- 本文記載時の環境
Angular CLI 13.2.0、Node.js 16.13.1、npm 8.3.2、TypeScript 4.5.5、Windows x64で生成したNgModuleベースのプロジェクト。 - 確認時期
2026年8月。Angular公式資料を照合して記載内容を見直した。
掲載したコードと画面は現行環境で再実行していない。 - 現在そのまま利用できない箇所
現在のAngular CLIはstandalone APIを使うアプリケーションを標準で生成し、通常はAppModuleを作らずbootstrapApplicationでルートコンポーネントを起動する。
以下のAppModule経由の流れは、既存のNgModuleベースのアプリケーションを読むための旧構成例となる。
トップページ（index.html、styles.scss）の読み込み
index.html
は、アプリケーションのトップページとして最初に読み込まれ、コンポーネントの呼出しは、セレクターと呼ばれるコンポーネントのキーを要素名とすることで関連付けされる。
以下、index.htmlでは次項で示すルートコンポーネントのセレクターapp-rootをbody部で指定し関連付けしている。
また、アプリケーション全体のスタイルファイルには、土台となる共通スタイルを追記する。このシリーズではSCSSを選択したためstyles.scssとなり、CSSを選択した場合はstyles.cssとなる。
（雛形プロジェクトの生成時は、スタイルは設定されていない。）
-
index.html
-
styles.scss（スタイル形式によってはstyles.css）
スタートアップコード（main.ts）の読み込み
旧NgModule構成のmain.tsでは、platformBrowserDynamic().bootstrapModule(AppModule)を実行し、次項のルートモジュールを起動する。
- main.ts
ルートモジュール（app.module.ts）の読み込み
app.module.tsでは、モジュール構成の宣言（@NgModuleデコレーター）とモジュールクラスの定義（export class AppModule）が記述されている。
- app.module.ts
@NgModuleデコレーターで設定できる主なパラメーターは、以下の通りでdeclarationsとbootstrapに次項で示す
ルートコンポーネント（AppComponent）を設定し、このルートモジュール（AppModule）をexport class AppModuleで公開し、前項のスタートアップコード（main.ts）で参照している。
- @NgModuleデコレーターの主な設定項目
declarations: モジュールに属すコンポーネント（※1）、ディレクティブ（※2）、パイプ（※3）等の設定
（※1）コンポーネント : 次項で示す@Componentデコレーターでラップされているクラス一式
（※2）ディレクティブ :ngIf、ngFor、ngStyle、ngClass等の構造/属性ディレクティブ
（※3）パイプ : 与えられたデータを加工整形する仕組みimports:NgModuleで宣言した外部モジュールのインポート設定exports: 他のNgModuleのテンプレートから利用できるコンポーネント、ディレクティブ、パイプなどの公開設定providers: DI（依存性注入）で利用するプロバイダーの登録bootstrap: ルートコンポーネントの設定id: モジュールIDの設定
ルートコンポーネント（app.component.ts）の読み込み
ルートコンポーネントとは、最初に呼出されるメインとなるコンポーネントであり、この旧構成ではルートモジュール（app.module.ts）から呼出される。
@Componentデコレーター の下記パラメーターで自身のセレクター、HTML、CSSを設定し、起動画面（template-pj app is running!.）を表示している。
- @Componentデコレーターの主な設定項目
selector: コンポーネントの参照キー。
templateUrl: コンポーネントが読み込むHTMLのファイルパス。
styleUrls: コンポーネントが読み込むCSSファイルパス。
-
app.component.ts
-
起動画面（template-pj app is running!.）
-
現行のstandalone構成
現行のstandalone構成では、通常AppModuleを作らず、main.tsからbootstrapApplicationへルートコンポーネントとアプリケーション設定を渡す。
import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';
bootstrapApplication(AppComponent, appConfig)
.catch((error) => console.error(error));
NgModule構成とstandalone構成では起動APIと設定ファイルが異なるが、index.html内のルート要素へルートコンポーネントを表示するという役割は共通する。
まとめ
- 旧NgModule構成では、index.htmlから始まり、main.tsでAppModuleを起動し、bootstrap設定からAppComponentを表示。
- 現行のstandalone構成では、main.tsからbootstrapApplicationを呼び出してルートコンポーネントを起動。
- モジュールはアプリの構成をまとめ、コンポーネントは画面を構成する部品を表す。
- app-rootは標準のHTMLタグではなく、AppComponentのselectorとして定義され、index.htmlの記述と対応。
- 初期表示の流れを確認するときはindex.htmlだけでなく、main.ts、AppModule、AppComponentの順に追う。