Utiliser correctement l'environnement.ts dans mon application angular4 avec angular-cli

J'utilise Intellij Ultimate pour coder mon application angulaire 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 importer dans mon code? Depuis que je l'ai construit, je précise quel environnement utiliser. Comment ça fonctionne? Dois-je compiler quelque chose avec Intellij?

j'ai essayé de googler et j'ai trouvé de nombreux exemples où les gens importaient réellement un environnement.fichier ts. mais ce n'est pas bon, non? Car il utilise le même environnement.ts fichier même si je construis pour un environnement différent.

Que dois-je faire?

21
demandé sur Draken 2017-04-06 17:42:23

4 réponses

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

En résumé, vous n'avez importé environment.ts mais le bon fichier sera importé en fonction de son environnement. angular cli va s'occuper de cela comme expliqué dans l'article.

21
répondu Ahmed Musallam 2018-03-07 10:19:22

j'ai eu cette même question, et j'ai trouvé le même article que @Ahmed a posté. Cependant, cela n'a pas résolu mon problème: je viens d'obtenir:

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

je travaille avec un build créé via ng new, donc si vous travaillez avec le dernier client angulaire, vous aurez probablement le même problème que moi. Comme le dit @Ahmed dans son commentaire sur sa réponse, il est important que vous obteniez le chemin relatif correct. La version (actuelle) du ng cli met votre principal composant d'application ici:

projectFolder/app/src/app.component.ts

Et il place l'environnement de fichier ici:

projectFolder/app/environments/environment.ts

par conséquent, la ligne correcte pour inclure l'environnement à l'intérieur de votre application.composant est ceci:

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

Petite "feature": environment.ts est l'environnement le fichier de configuration de l'environnement de développement. Cependant, au moment de l'exécution (en raison de l' ng build commande ou ng serve commande), ce fichier sera remplacé par ce que l'environnement des états. Donc, 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 pour quelque soit votre environnement. Il me semble étrange, mais ça fonctionne, et il semble que c'est la façon dont il est conçu.

10
répondu Conor Mancone 2017-07-07 16:54:44

j'ai eu beaucoup de mal à faire ce travail. J'ai essayé de suivre tellement de tutoriels, ng serve n'a tout simplement rien capté en dehors de l'environnement dev. J'ai finalement réussi à le faire fonctionner avec:

.angulaire de la cli.fichier json

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

dossiers D'environnement, sous ./ src et suivant la structure des dossiers

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

environnement.fichier ts:

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

environnement.test.fichier ts

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

environnement.prod.ts le fichier

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

* * ne créez pas un autre environnement.fichier 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 de l'environnement ../environnements dossier. j'ai fait une erreur en suivant un tutoriel et en créant un environnement.ts src dossier qui n'a pas fonctionné 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 vous aidera.

au fait, J'ai fait ça avec Angular 5.

7
répondu Sannu 2018-03-01 17:38:54

Environnements ne fonctionnait pas pour moi @angular/cli1.2.4, mais ils n'ont charge Ok 1.3.2, donc assurez-vous d'utiliser la dernière version de la série.

1
répondu Mateo Tibaquirá 2018-05-03 19:30:49