web-dev-qa-db-fra.com

Comment configurer différents environnements de développement dans Angular 2 app

J'ai un fichier constant

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

Et je l'ai importé à mon service

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

Comment puis-je changer le endpont avec le changement de serveur. J'ai le serveur intermédiaire de serveur de développement et le serveur local. Je veux que l'application détecte le changement d'environnement.

Dans mon angular 1, j'ai utilisé envserviceprovider pour cela. Puis-je utiliser la même chose dans angular 2??

angularangular2-services
47
Minna zacharias

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

export class config {

    public static getEnvironmentVariable(value) {
        var environment:string;
        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;
0
Minna zacharias

Réponse courte: utilisez CLI angulaire . Il est en phase bêta mais fonctionne vraiment bien et il est recommandé par l’équipe Angular pour le démarrage de nouveaux projets. Cet outil permet de configurer différents environnements. Lors de la construction, le src/client/app/environment.ts sera remplacé par config/environment.dev.ts Ou config/environment.prod.ts, En fonction de l'environnement CLI actuel.

La valeur par défaut de l'environnement est dev, mais vous pouvez générer une version de production via l'indicateur -prod Dans ng build -prod Ou ng serve -prod. Étant donné qu’il s’agit d’une nouvelle fonctionnalité, cela peut être un peu confus, alors consultez ce guide génial pour obtenir des informations supplémentaires sur la configuration de Angular Environnements utilisant CLI.

J'espère que cela t'aides.

70
Cartucho

Je voudrais juste ajouter un peu plus de lumière dans la réponse fournie par @Cartucho. Il a raison sur les étapes nécessaires pour configurer un environnement personnalisé pour vos angular 2). Je voudrais également appuyer l'opinion selon laquelle l'article de Guide de création de l'application dans différents environnements

Mais l'article mentionné manque 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'objet "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 apportées, 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 ce post est utile à tout nouveau développeur Angular 2.

30
Saurabh Shetty
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;
    }
}
0
Mahesh Kumar Alanka

J'espère que ça aide.

Commencez par créer les fichiers de configuration development.ts, staging.ts et 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!

N'oubliez pas 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",
0
Leonardo Venoso