Skip to content

A quoi sert le fichier main.ts ?

Dans un projet Angular, le fichier main.ts est le point d'entrée de l'application. C'est le premier fichier exécuté lorsque l'application démarre, et il est responsable de charger et d'initialiser le module principal de l'application.

Le fichier main.ts est généré par défaut lorsque vous créez un nouveau projet Angular en utilisant la commande ng new. Il contient généralement le code suivant :

ts
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

Le code ci-dessus permet d'activer le mode de production si nécessaire (ligne 8), puis de charger et d'initialiser le module principal de l'application (ligne 12). Le module principal est défini dans le fichier app.module.ts, et il contient tous les composants, services, modules, etc. utilisés par l'application.

Le fichier main.ts est un fichier important pour votre application Angular, car c'est à partir de ce fichier que l'application sera lancée.

Cas d'usage de main.ts ?

Un cas d'utilisation courant de main.ts est lors de la mise en production de l'application. Lorsque l'application est prête à être déployée, vous pouvez utiliser le fichier main.ts pour activer le mode de production (en utilisant la ligne enableProdMode()), qui permet d'optimiser l'application pour une exécution en production. Cela peut inclure des actions telles que l'optimisation du code, la suppression de fonctionnalités de débogage, etc.

En plus de son utilisation lors de la mise en production de l'application, main.ts peut également être utilisé pour effectuer d'autres tâches d'initialisation de l'application. Par exemple, vous pouvez utiliser ce fichier pour charger des données depuis un fichier de configuration externe, pour initialiser des services, pour enregistrer des intercepteurs d'URL, etc.

Comment changer les options de main.ts ?

Vous pouvez utiliser le fichier angular.json pour configurer certaines options liées à main.ts, telles que le point d'entrée de l'application ou les options de compilation.

Voici un exemple de configuration du point d'entrée de l'application dans angular.json :

json
{
  "projects": {
    "mon-projet": {
      "architect": {
        "build": {
          "options": {
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            // ...
          }
        }
      }
    }
  }
}
{
  "projects": {
    "mon-projet": {
      "architect": {
        "build": {
          "options": {
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            // ...
          }
        }
      }
    }
  }
}