NG0400: A platform with a different configuration has been created

L'erreur NG0400: A platform with a different configuration has been created. Please destroy it first est un message que vous pourriez rencontrer lors du développement avec Angular. Dans ce tutoriel, nous allons explorer les causes de cette erreur et les différentes façons de la résoudre.

Qu'est-ce que l'erreur NG0400 ?

Imaginez que vous essayez d'établir deux quartiers généraux différents pour diriger une même équipe. Chacun aurait ses propres règles et méthodes de gestion, ce qui créerait inévitablement des conflits et de la confusion. C'est exactement ce qui se passe avec Angular lorsque vous tentez de créer deux plateformes différentes dans la même application.

Angular utilise une "plateforme" comme point d'entrée principal pour démarrer et gérer votre application. Il ne peut exister qu'une seule instance de cette plateforme à la fois dans un même contexte d'exécution. Si vous tentez d'en créer une seconde avec une configuration différente, Angular vous avertit avec l'erreur NG0400.

Situations courantes provoquant l'erreur

1. Dans les tests unitaires

test.spec.ts

import { TestBed } from '@angular/core/testing';
import { AppComponent } from './app.component';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

// Problème: cette ligne crée une plateforme
platformBrowserDynamic().bootstrapModule(AppModule);

describe('AppComponent', () => {
  beforeEach(() => {
    // Problème: TestBed tente de créer une autre plateforme
    TestBed.configureTestingModule({
      declarations: [AppComponent]
    });
  });

  it('should create the app', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.componentInstance;
    expect(app).toBeTruthy();
  });
});

2. Dans les applications de micro-frontends

app1/main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { App1Module } from './app1.module';

// Première plateforme créée
platformBrowserDynamic().bootstrapModule(App1Module);

app2/main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { App2Module } from './app2.module';

// Tentative de créer une deuxième plateforme → NG0400
platformBrowserDynamic().bootstrapModule(App2Module);

3. Dans les environnements de développement avec hot-reload

Cette erreur peut également survenir lorsque les outils de développement tentent de recharger votre application sans détruire correctement la plateforme précédente.

Solutions pour résoudre l'erreur

Solution 1: Détruire la plateforme existante avant d'en créer une nouvelle

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

// Accès à la plateforme Angular via PlatformRef
const platformRef = platformBrowserDynamic();

// Détruire la plateforme si elle existe déjà
if (platformRef) {
  platformRef.destroy();
}

// Créer une nouvelle plateforme
platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

Solution 2: Réutiliser la plateforme existante

Pour les micro-frontends ou les environnements partagés, vous pouvez stocker et réutiliser une instance de plateforme:

shared-platform.ts

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

/**
 * Récupère ou crée une instance partagée de la plateforme Angular
 * 
 * @returns L'instance de PlatformRef pour le bootstrap des modules
 * 
 * @example
 * // Dans un micro-frontend
 * import { getSharedPlatform } from './shared-platform';
 * import { MicroFrontendModule } from './micro-frontend.module';
 * 
 * getSharedPlatform().bootstrapModule(MicroFrontendModule);
 */
export function getSharedPlatform(): PlatformRef {
  // Stocker la référence dans window pour la partager entre les applications
  const win = window as any;
  
  if (!win.angularPlatform) {
    win.angularPlatform = platformBrowserDynamic();
  }
  
  return win.angularPlatform;
}

app1/main.ts

import { getSharedPlatform } from '../shared-platform';
import { App1Module } from './app1.module';

// Utilise la plateforme partagée pour le premier module
getSharedPlatform().bootstrapModule(App1Module);

app2/main.ts

import { getSharedPlatform } from '../shared-platform';
import { App2Module } from './app2.module';

// Utilise la même plateforme partagée pour le second module
getSharedPlatform().bootstrapModule(App2Module);

Solution 3: Corriger la configuration des tests

Pour les tests unitaires, assurez-vous que votre configuration de test n'inclut pas le fichier main.ts qui bootstrap l'application. Dans Karma, vous pouvez exclure ce fichier explicitement:

karma.conf.js

module.exports = function (config) {
  config.set({
    frameworks: ['jasmine', '@angular-devkit/build-angular'],
    files: [
      'src/**/*.spec.ts'
    ],
    exclude: [
      'src/main.ts' // Exclure explicitly main.ts
    ],
    // ... autres configurations
  });
};

CONSEIL DE PERFORMANCE

Dans les applications de micro-frontends, le partage d'une plateforme unique non seulement évite l'erreur NG0400, mais améliore également les performances en réduisant la duplication des ressources Angular chargées dans votre application.