Angular Academy · レッスン

Standaloneアプリのブートストラップ

Q: 「Standaloneアプリのブートストラップ」で何を学びますか？

bootstrapApplicationでアプリを起動します。 ブラウザで直接実行するハンズオンコードでAngular Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

bootstrapApplicationでアプリを起動します。

「Standaloneアプリのブートストラップ」はCoddyKit上の無料Angular Academyレッスンです。これはレッスン4/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはAngular Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Angular Academyコースには全4レッスンが含まれています。

Standaloneアプリのブートストラップ

完全なStandaloneアプリは、ルートNgModuleをブートストラップする代わりに bootstrapApplication で起動します。ルートコンポーネントを渡して呼び出します。

エントリーポイント：main.ts

アプリケーションのエントリーファイルは main.ts です。このファイルで、通常はAppComponentをルートコンポーネントとしてbootstrapApplicationを呼び出します。

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent);

bootstrapApplicationの提供元

bootstrapApplication は @angular/platform-browser からインポートします。以前のplatformBrowserDynamic().bootstrapModuleパターンに代わるものです。

ルートコンポーネント

ルートコンポーネントは通常のStandaloneコンポーネントです。通常はrouter outletまたはアプリケーションの最上位レイアウトを配置します。

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: '<h1>My App</h1>'
})
export class AppComponent {}

アプリケーションサービスの提供

アプリケーション全体で使うプロバイダーは、第2引数の providers 配列を持つオブジェクトに指定します。ここでルーター、HTTPクライアント、グローバルサービスを設定します。

bootstrapApplication(AppComponent, {
  providers: []
});

ルーターの提供

provideRouter(routes) を使って、Standaloneアプリのルーティングを設定します。

import { provideRouter } from '@angular/router';
import { routes } from './app.routes';

bootstrapApplication(AppComponent, {
  providers: [provideRouter(routes)]
});

HttpClientの提供

providers配列に provideHttpClient() を指定してHTTPを有効にします。

import { provideHttpClient } from '@angular/common/http';

bootstrapApplication(AppComponent, {
  providers: [provideHttpClient()]
});

プロバイダーの組み合わせ

必要な数のprovide*関数をまとめて指定できます。

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(routes),
    provideHttpClient()
  ]
});

app.config.tsパターン

CLIでは通常、プロバイダーを ApplicationConfig として app.config.ts に切り出し、main.tsをすっきりさせます。

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [provideRouter(routes)]
};

main.tsでのapp.configの使用

その後、main.tsではappConfigを渡すだけになります。

import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, appConfig);

エラー処理

bootstrapApplicationはPromiseを返します。起動時のエラーを捕捉してログに記録できます。

bootstrapApplication(AppComponent, appConfig)
  .catch(err => console.error(err));

クイックチェック：ブートストラップ

Standaloneアプリはどのように起動しますか。

まとめ：ブートストラップ

bootstrapApplication(AppComponent)を使ってStandaloneアプリを起動し、provideRouterやprovideHttpClientなどのアプリケーション全体のプロバイダーを渡します。CLIではこれらをapp.config.tsに切り出します。ルートNgModuleは必要ありません。これでStandaloneコンポーネントの詳細な学習を修了しました。

よくある質問

「Standaloneアプリのブートストラップ」レッスンは無料ですか？

はい。「Standaloneアプリのブートストラップ」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Angular Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Angular Academyコースには全4レッスンが含まれています。

「Standaloneアプリのブートストラップ」で何を学びますか？

bootstrapApplicationでアプリを起動します。ブラウザで直接実行するハンズオンコードでAngular Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Angular Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのAngular Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン4/4です。

「Standaloneアプリのブートストラップ」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このAngular Academyレッスンでコードを書いて実行できますか？

はい。すべてのAngular Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Angular Academyに戻る