web-dev-qa-db-fra.com

CLI angulaire: changement REST URL de l'API sur la construction

Je souhaite supprimer mon préfixe de serveur local de mes URL d'API REST (par exemple, http: // localhost: 8080 ) lors de la génération pour la production (ng build --prod). 

Je comprends que cela a quelque chose à voir avec le fichier d'environnement environment.prod.ts, mais je ne trouve aucun exemple d'utilisation de ceux-ci pour atteindre les objectifs susmentionnés. 

Serait bien si quelqu'un m'aide à démarrer!

angularangular-cliangular-webpack
12
karthikaruna

Ne codez pas en dur l’URL . Utilisez les fichiers environment.prod.ts et environment.ts contenus dans src/environment . Pour localhost, utilisez dans le fichier environment.ts une variable enregistrer votre URL.

export const environment = 
{
    production: false,
    API_URL: 'http://localhost:8080',
};

pour la production, dans environment.prod.ts

export const environment = 
{
    production: true,
    API_URL: 'http://api.productionurl.com',
};

Lorsque vous utilisez dans votre code, importez la variable,

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

private API_URL= environment.API_URL;

chaque fois que vous utilisez pour la production, utilisez l'option de commande angulaire cli

ng build --env=prod

Le contenu du fichier de l’environnement actuel les écrasera lors de la compilation . Le système de construction utilisera par défaut l’environnement de développement qui utilisera environment.ts, mais si vous le faites ng build --env=prod puis environment.prod.ts sera utilisé à la place . Les cartes env dans lesquelles le fichier peut être trouvé dans .angular-cli.json.

Pour plus de requêtes, voir https://angular.io/guide/deployment

28
Akash Tantri

Une façon d'y parvenir est de définir différentes URL de base en fonction de isDevMode() dans votre code. Par exemple,

import { isDevMode } from '@angular/core';

// ...
let baseUrl: string;
if (isDevMode()) {
    baseUrl = "http://localhost:8080/";
} else {
    baseUrl = "http://api.myprodserver.com/";
}
// ...

Edit: Ceci est censé être pour l'illustration. Vous voudrez probablement utiliser un type de "config" (dépendant de l'env) dans du code réel. 

0
realharry

URL relatives

Il est judicieux de définir une API_URL dans votre environnement. Toutefois, si votre API et votre application client sont servies à partir du même serveur ou domaine, vous pouvez utiliser des URL relatives à la place. Il est beaucoup plus facile à configurer et simplifie votre processus de construction.

Voici un code qui pourrait vivre dans un service API.

  get(path: string, params: HttpParams = new HttpParams()): Observable<any> {
    return this.http.get(`/api${path}`, { params })
      .pipe(catchError(this.formatErrors));
  }

Si vous utilisez environment.API_URL, vous pouvez toujours configurer cette valeur pour qu'elle soit vide. 

Cela peut être utile si vous servez votre application et votre API à partir de serveurs locaux différents dans un environnement de développement. Par exemple, vous pouvez utiliser ng serve à partir de localhost: 4200 et exécuter votre API à partir d’un backend PHP, C #, Java, etc. sur localhost: 43210. Vous aurez besoin de la configuration API_URL pour le développement.

  get(path: string, params: HttpParams = new HttpParams()): Observable<any> {
    return this.http.get(`${environment.api_url}/api${path}`, { params })
      .pipe(catchError(this.formatErrors));
  }

En bonus, voici un exemple d'ApiService qui est un objet injectable que vous pouvez utiliser dans votre application!

https://github.com/gothinkster/angular-realworld-example-app/blob/63f5cd879b5e1519abfb30302727c37ff7b890d92/src/app/core/services/api.service.ts

Faites également attention à la référence de base de votre page HTML principale.

0
Jess