web-dev-qa-db-de.com

Angular CLI: Ändern REST API-URL beim Erstellen

Ich möchte mein lokales Serverpräfix aus den API-URLs REST entfernen (Beispiel: http: // localhost: 8080 ), wenn für die Produktion (ng build --prod) erstellt wird. 

Ich verstehe, dass es etwas mit der Umgebungsdatei environment.prod.ts zu tun hat, aber ich kann keine Beispiele finden, wie man sie benutzt, um das oben genannte zu erreichen. 

Wäre super, wenn mir jemand beim Start hilft!

12
karthikaruna

Die URL nicht festcodieren. __ Verwenden Sie environment.prod.ts und environment.ts -Dateien, die sich innerhalb von src/umweltszenen . Für localhost befinden Speichern Sie Ihre URL.

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

für die Produktion, in der Umgebung

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

Wenn Sie in Ihrem Code die Variable importieren,

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

private API_URL= environment.API_URL;

wann immer Sie für die Produktion verwenden, verwenden Sie die Option für den Winkelkli

ng build --env=prod

Der Inhalt der Datei für die aktuelle Umgebung wird diese während des Builds überschreiben. Das Buildsystem verwendet standardmäßig die dev-Umgebung, die environment.ts verwendet. Wenn Sie jedoch ng build --env=prod verwenden, wird stattdessen environment.prod.ts verwendet. Die Liste davon env ordnet zu welcher Datei in .angular-cli.json gefunden werden kann.

Weitere Fragen finden Sie unter https://angular.io/guide/deployment

28
Akash Tantri

Eine Möglichkeit, dies zu erreichen, besteht darin, verschiedene Basis-URLs basierend auf isDevMode() in Ihrem Code zu definieren. Zum Beispiel,

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

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

Edit: Dies soll zur Veranschaulichung dienen. Sie möchten wahrscheinlich einen Typ von (env-abhängiger) "config" in realem Code verwenden. 

0
realharry

Relative URLs

Das Einfügen einer API_URL in die Umgebung config ist eine gute Idee. Wenn Ihre API- und Client-App jedoch von demselben Server oder derselben Domäne bereitgestellt wird, können Sie stattdessen relative URLs verwenden Es ist viel einfacher einzurichten und vereinfacht den Build-Prozess.

Hier ist etwas Code, der in einem API-Dienst leben würde.

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

Wenn Sie die Umgebung.API_URL verwenden, können Sie den Wert weiterhin leer konfigurieren. 

Dies kann hilfreich sein, wenn Sie Ihre App und API von separaten Localhost-Servern in einer Entwicklungsumgebung bereitstellen. Beispielsweise können Sie ng serve von localhost: 4200 aus ausführen und Ihre API über ein PHP-, C # -, Java-Backend auf localhost: 43210 ausführen. Sie benötigen die API_URL-Konfiguration für die Entwicklung.

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

Als Bonus ist hier ein Beispiel für ApiService, das ein injizierbares Objekt ist, das Sie in Ihrer App verwenden können!

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

Beachten Sie auch die Basisreferenz in Ihrer HTML-Hauptseite.

0
Jess