web-dev-qa-db-fra.com

Utilisant correctement environment.ts dans mon application angular4 avec angular-cli

J'utilise Intellij Ultimate pour coder mon application angular 4.

J'ai créé un nouveau projet Angular 4, il contient environment.ts et environment.prod.ts et les environnements sont correctement configurés dans angular-cli.json.

comment puis-je l'importer dans mon code? Depuis que je le construit, je précise quel environnement utiliser. Comment ça marche? Dois-je compiler quelque chose avec Intellij?

J'ai essayé de googler et j'ai trouvé de nombreux exemples de personnes ayant importé un fichier environment.ts spécifique. mais ce n'est pas bon, non? Puisqu'il utilisera le même fichier environment.ts même si je construis pour un environnement différent.

Que fais-je?

angularangular-cli
25
ufk

Voici un très bon article sur les fichiers d'environnement avec angular cli: http://tattoocoder.com/angular-cli-using-the-environment-option/

En résumé, vous avez importé environment.ts mais le fichier correct sera importé en fonction de l'environnement. angular cli s’occupe de cela comme expliqué dans l’article.

26
Ahmed Musallam

J'avais cette même question et trouvais le même article que celui écrit par @Ahmed. Cependant, cela n'a pas résolu mon problème: je viens de recevoir:

ERROR in XXX/src/app/app.component.ts (19,29): Cannot find module './environment'.

Je travaille avec une version créée via ng new _, donc si vous travaillez avec le dernier angular client, vous aurez probablement le même problème que moi. Comme @Ahmed le dit dans son commentaire, il est important que vous obteniez le chemin relatif correct. La version (actuelle) de la clé ng place votre composant principal de l'application ici:

projectFolder/app/src/app.component.ts

Et cela place le fichier d'environnement ici:

projectFolder/app/environments/environment.ts

Par conséquent, la ligne appropriée pour inclure l'environnement depuis votre app.component est la suivante:

import { environment } from '../environments/environment';

Petite "fonctionnalité": environment.ts est en fait le fichier de configuration de l’environnement pour l’environnement de développement. Cependant, au moment de l'exécution (soit en raison de la ng build commande ou ng serve commande), ce fichier sera remplacé par l’état actuel de l’environnement. Ainsi, même si vous incluez explicitement le fichier d'environnement de développement, au moment de l'exécution, vous obtiendrez les variables d'environnement correspondant à votre environnement. Cela me semble étrange, mais cela fonctionne, et il semble que c'est ainsi que cela est conçu pour fonctionner.

11
Conor Mancone

J'ai eu beaucoup de difficulté à obtenir que cela fonctionne. Essayé de suivre autant de tutoriels, ng serve n'a rien ramassé en dehors de l'environnement de développement. J'ai finalement pu le faire fonctionner avec:

fichier .angular-cli.json

  ....
  "environmentSource": "environments/environment.ts",
  "environments": {
    "dev": "environments/environment.dev.ts",
    "test": "environments/environment.test.ts",
    "prod": "environments/environment.prod.ts"
  }
  ....

Fichiers d'environnement, sous ./src et structure de dossiers suivante

./environments
|--environment.ts
|--environment.test.ts
|--environment.prod.ts
|--environment.dev.ts

fichier environment.ts:

    export const environment = {
        production: false,
        apiBase: 'http://dev-server:4200/app/',
        env: 'dev'
    };

fichier environment.test.ts

    export const environment = {
        production: false,
        apiBase: 'http://test-server:2080/app/',
        env: 'test'
    };

fichier environment.prod.ts

    export const environment = {
        production: true,
        apiBase: 'http://prod-server:2080/app/',
        env: 'prod'
    };

** Ne créez pas un autre fichier environment.ts sous src.

app.module.ts ou tout autre composant pour lequel vous souhaitez utiliser les propriétés de l'environnement. N'oubliez pas d'importer l'environnement du dossier ../environments. J'ai commis une erreur en suivant un tutoriel et en créant environment.ts dans le dossier src, ce qui ne fonctionnait pas pour moi. 

import { environment } from '../environments/environment';
export class AppModule {
    constructor() {
       console.log('Base Api :' + environment.apiBase +
            ' production? ' +  environment.production +
            ' env: ' + environment.env);
    }
}

J'espère que cela t'aides.

À propos, j’ai fait cela avec Angular 5.

10
Sannu

Les environnements ne fonctionnaient pas pour moi avec @angular/cli1.2.4, mais ils ont chargé Ok avec 1.3.2, assurez-vous d’utiliser la dernière version de la série.

1
Mateo Tibaquira