Deamonspace

Reconnu d'utilité publique depuis 1804

Gérer l’héritage d’environnements avec Angular

| Aucun commentaire

Coucou mes petits chats,

Aujourd’hui on va parler un peu d’héritage, pas celui de Tonton Maurice mais de celui des environnements sous Angular.

Contexte

Vous bossez sur votre appli Angular et vous avez au minimum un environnement de dev et un environnement de prod. Vous avez donc les fichiers environments/environment.ts (votre config par défaut de dév) et environments/environment.prod.ts. On ne réexpliquera pas ici comment gérer ces fichiers, la doc Angular le fait déjà fort bien.

En gros vos fichiers vont ressembler à ceci :

// environments/environment.ts
export const environment = {
  title: 'My wonderful app',
  version: '1.2.3',

  production: false,
  apiEndpoint: 'http://localhost',

  headers: {
    'Content-Type': 'application/json',
  },
  // ... any other keys ...
};
// environments/environment-prod.ts
export const environment = {
  title: 'My wonderful app',
  version: '1.2.3',

  production: true,
  apiEndpoint: 'https://my-wonderful-api.com',

  headers: {
    'Content-Type': 'application/json',
  },
  // ... any other keys ...
};

Et sans rigoler, à part des lignes 6 et 7, vous faites des copier-coller, puis à un moment vous oubliez de mettre à jour la version dans un des deux fichiers…

Bref c’est pas glop.

Du coup la bonne idée ce serait de définir les trucs communs à tous les environnements (comme la version, les différents paramètres techniques de l’appli…) à un seul endroit, et n’ajouter que les éléments spécifiques dans les fichiers environment.ts et environment.prod.ts !

La solution

Créez le fichier des paramètres communs, on va l’appeler global.ts, et dedans vous allez y mettre tout ce qui est… commun :

// environments/global.ts
export const ENVIRONMENT_GLOBAL = {
  title: 'My wonderful app',
  version: '1.2.3',

  headers: {
    'Content-Type': 'application/json',
  },
  // ... any other keys ...
};

Ensuite revenez sur vos fichiers d’environnement classiques et faites-leur profiter de l’héritage !

// environments/environment.ts
import { ENVIRONMENT_GLOBAL } from './global';

export const environment = {
  ...ENVIRONMENT_GLOBAL,

  production: false,
  apiEndpoint: 'http://localhost',
};
// environments/environment-prod.ts
import { ENVIRONMENT_GLOBAL } from './global';

export const environment = {
  ...ENVIRONMENT_GLOBAL,

  production: true,
  apiEndpoint: 'https://my-wonderful-api.com',
};

Et là mon gars tu te sens pas un peu le roi du monde ?