9
votes

Comment utiliser les valeurs par défaut pour les environnements angulaires

J'ai plusieurs fichiers d'environnement pour mon application Angular:

environment.ts
environment.dev.ts
environment.prod.ts

J'aimerais utiliser des variables par défaut partagées par tous les environnements sans les dupliquer dans chaque fichier. Si j'ajoute une variable 'homeUrl' uniquement dans environment.ts par exemple:

export const environment = {
  production: false,
  apiUrl: 'http://some-backend-url/',
  homeUrl: '/illustrator/directory'
};

Quand j'exécute l'application avec la configuration dev, mes variables de environment.dev.ts sont chargés correctement mais homeUrl n'est pas défini car il n'est déclaré que dans le fichier environment.ts .

Existe-t-il un moyen d'utiliser variables par défaut partagées entre les environnements sans les copier?

typescript angular

2 commentaires

..une bonne lecture sur les environnements

stackoverflow .com / questions / 47485087 /…

3 Réponses :

8
votes

Vous pouvez importer des variables par défaut de l'extérieur.

default.ts:

import {default} from 'default'

export const environment = {
  ...default,
  production: false
}

dans environment.ts:

export const default = {
  apiUrl: 'http://some-backend-url/',
  homeUrl: '/illustrator/directory'
}

et l'importer dans tous les fichiers. Donc, de cette façon, vous ne pouvez modifier que dans le fichier default.ts et s'appliquera automatiquement dans tous les environnements

2 commentaires

Et si je déclare la variable dans l'un des fichiers d'environnement, remplacera-t-elle ceux par défaut?

Cette suggestion a fonctionné bien que je ne puisse pas utiliser «par défaut» comme nom, merci Oleg.

0
votes

En plus de la répartition / attribution des objets, vous pouvez simplement déclarer les configurations d'environnement comme une classe qui hérite chacune de votre classe de base.

// environment.dev.ts, environment.prod.ts...
import { environment as EnvironmentBase } from './environment';

export class environment extends EnvironmentBase {
  static newThing = '??';
  static homeUrl = 'NewUrl'; // overridden
}

puis dans vos autres configurations d'environnement ...

// environment.ts
export class environment {
  static value = 'DefaultValue';
  static homeUrl = 'DefaultUrl';
}

Choses à noter: ce sont maintenant des classes au lieu de littéraux d'objet, donc leurs propriétés doivent être statiques pour correspondre à l'accès. De plus, vous devrez importer la configuration de base sous un nom différent puisque vous définissez une classe avec le même nom dans ce fichier (ou créez simplement une classe de base distincte) /

1 commentaires

Cette solution échouera lorsque vous tenterez d'accéder à environnement sur appModule , ex. ServiceWorkerModule.register ('ngsw-worker.js', {enabled: environment. Production}) , avec AppModule 'Les appels de fonction ne sont pas pris en charge dans le nouvel objet des décorateurs , l'environnement devrait exporter en tant que const / var , consultez ma réponse .

0
votes

Ma réponse améliorera la réponse Oleg :

1. Interface de base:

// environment.dev.ts
export const environment: Config = {
    ...environmentBase,
  production: false,
}

2. Environnement de base:

// environment.prod.ts
export const environment: Config = {
    ...environmentBase,
  production: true,
}

3. Environnement de production:

// environment.base.ts
export const environmentBase = {
  apiUrl: 'http://some-backend-url/',
  homeUrl: '/illustrator/directory'
  // add more base, default, share config definitions.
}

4. Environnement de développement:

// config.ts
export interface Config {
   production: boolean;
   apiUrl: string;
   homeUrl: string;
   // added other need config definition.
}

0 commentaires