Angular Academy · Leçon

Amorcer une application autonome

Démarrez une application avec bootstrapApplication.

Amorcer une application autonome est une leçon Angular Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Angular Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Angular Academy comprend 4 leçons au total.

Démarrer une application autonome

Une application entièrement autonome commence avec bootstrapApplication au lieu de démarrer un NgModule racine. Vous lui transmettez votre composant racine.

Le point d’entrée : main.ts

Le fichier d’entrée de l’application est main.ts. Il appelle bootstrapApplication avec le composant racine, généralement AppComponent.

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

bootstrapApplication(AppComponent);

D’où vient bootstrapApplication

bootstrapApplication est importé depuis @angular/platform-browser. Il remplace l’ancien modèle platformBrowserDynamic().bootstrapModule.

Le composant racine

Le composant racine est un composant autonome ordinaire. Il héberge généralement la sortie du routeur ou la mise en page principale.

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

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

Fournir les services de l’application

Les fournisseurs à l’échelle de l’application sont placés dans le deuxième argument : un objet contenant un tableau providers. C’est là que sont configurés le routeur, le client HTTP et les services globaux.

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

Fournir le routeur

Utilisez provideRouter(routes) pour configurer le routage d’une application autonome.

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

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

Fournir HttpClient

Activez HTTP avec provideHttpClient() dans le tableau des fournisseurs.

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

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

Combiner les fournisseurs

Répertoriez ensemble autant de fonctions provide* que nécessaire.

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

Le modèle app.config.ts

Le CLI extrait souvent les fournisseurs dans app.config.ts sous la forme d’une ApplicationConfig, afin de garder main.ts propre.

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

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

Utiliser app.config dans main.ts

main.ts se contente alors de transmettre appConfig.

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

bootstrapApplication(AppComponent, appConfig);

Gestion des erreurs

bootstrapApplication renvoie une promesse. Vous pouvez intercepter les erreurs de démarrage pour les consigner.

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

Vérification rapide : démarrage

Comment une application autonome démarre-t-elle ?

Récapitulatif : démarrage

Vous démarrez une application autonome avec bootstrapApplication(AppComponent), en lui transmettant des fournisseurs à l’échelle de l’application comme provideRouter et provideHttpClient. Le CLI regroupe ces éléments dans app.config.ts. Aucun NgModule racine n’est nécessaire. Vous avez terminé l’approfondissement des composants autonomes.

Questions Fréquemment Posées

La leçon « Amorcer une application autonome » est-elle gratuite ?

Oui — le texte complet de « Amorcer une application autonome » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Angular Academy, passe à CoddyKit PRO. Le cours Angular Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Amorcer une application autonome » ?

Démarrez une application avec bootstrapApplication. Tu pratiques Angular Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Angular Academy ?

Aucune expérience préalable n'est requise. Angular Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.

Combien de temps prend la leçon « Amorcer une application autonome » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Angular Academy ?

Oui. Chaque leçon Angular Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

Pourquoi utiliser des composants autonomes
Créer des composants autonomes
Importer directement les dépendances
Amorcer une application autonome

← Retour à Angular Academy