Comment configurer un environnement de développement différent dans l’application Angular 2

J’ai un fichier constant

export class constants { public static get API_ENDPOINT(): ssortingng { return 'https://dvelopment-server/'; } } 

Et je l’ai importé à mon service

 private _registrationUrl = constants.API_ENDPOINT+'api/v1/register'; 

Comment puis-je modifier l’endpont avec le changement de serveur? J’ai un serveur de développement de serveur de développement et un serveur local. Je veux que l’application détecte le changement d’environnement.

Dans mon application angular 1, j’ai utilisé envserviceprovider pour cela. Puis-je utiliser le même dans l’application angular 2?

Réponse courte: utilisez la CLI angular . Il est en phase bêta mais fonctionne très bien et il est recommandé par l’équipe angular pour lancer de nouveaux projets. Avec cet outil, vous pouvez configurer différents environnements. Au moment de la construction, src/client/app/environment.ts sera remplacé par config/environment.dev.ts ou config/environment.prod.ts , en fonction de l’environnement CLI actuel.

L’environnement est -prod par défaut sur dev , mais vous pouvez générer une version de production via l’ -prod dans ng build -prod ou ng serve -prod . Étant donné qu’il s’agit d’une nouvelle fonctionnalité, il peut s’avérer un peu compliqué, alors consultez ce guide pour obtenir des informations supplémentaires sur la configuration des environnements angulars à l’aide de l’interface CLI.

J’espère que cela t’aides.

Je voudrais juste append un peu plus de lumière dans la réponse fournie par @Cartucho. Il a raison sur les étapes requirejses pour configurer un environnement personnalisé pour vos applications angulars 2. Je voudrais également appuyer l’opinion que l’article de Guide pour créer l’application dans différents environnements

Mais l’article donné passe à côté d’une étape importante. Les étapes pour configurer un environnement personnalisé sont les suivantes: 1) Créez un nouveau fichier appelé environment.YourEnvName.ts dans le dossier des environnements du projet. 2) Ajoutez la description de l’environnement dans l’object “environnements” dans le fichier angular-cli.json .

 "environments": { "source": "environments/environment.ts", "prod": "environments/environment.prod.ts", "dev": "environments/environment.dev.ts", "qa": "environments/environment.qa.ts", "YourEnvName": "environments/environment.YourEnvName.ts" } 

3) Une fois ces modifications apscopes, vous pouvez créer l’application pour votre nouvel environnement à l’aide de la commande suivante.

 ng build --environment=YourEnvName or ng serve --environment=YourEnvName 

J’espère que cet article est utile à tout nouveau développeur Angular 2.

 export class endPointconfig { public static getEnvironmentVariable() { let origin = location.origin; let path = location.href.split('/')[3]; let value = origin +'/'+ path + '/api/';`enter code here` return value; } } 

J’espère que ça aide.

Tout d’abord, créez les fichiers de configuration development.ts, staging.ts, production.ts. Deuxièmement, dans votre index.pug, importez le fichier d’environnement de la manière suivante:

  SystemJS.import("#{settings.env}").then(function(env) { System.import("app").catch(console.error.bind(console)); } // Promise.all also works! 

Rappelez-vous que dans nodeJS / Pug / Jade settings.env contient la valeur NODE_ENV.

Et enfin, votre carte system.config.ts devrait avoir les lignes suivantes:

  "development": "myUrl/configs/development.js", "staging": "myUrl/configs/staging.js", "production": "myUrl/configs/production.js", 

J’ai résolu le problème en ajoutant une méthode de classe

 export class config { public static getEnvironmentVariable(value) { var environment:ssortingng; var data = {}; environment = window.location.hostname; switch (environment) { case'localhost': data = { endPoint: 'https://dev.xxxxx.com/' }; break; case 'uat.server.com': data = { endPoint: 'https://uat.xxxxx.com/' }; break; default: data = { endPoint: 'https://dev.xxxx.com/' }; } return data[value]; } } 

À mon service

 private _loginUrl = config.getEnvironmentVariable('endPoint')+'api/v1/login;