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

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.

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.

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.