Konfigurieren Sie Port für HTTP in Angular.io

Question

ich möchte eine angular.io-Anwendung erstellen, aber die Rest-API soll von einem anderen Server-Port geliefert werden.

Angular Inhalt von localhost: 4200, die Daten von einem Knoten Express-Server unabhängig gestartet auf localhost: 3000. Aber wenn ich "http" injiziere und benutze, wie kann ich den zu verwendenden Port konfigurieren?

Frank

Answer 1

es einfach die URL hinzufügen

this.http.get('http://localhost:3000') 

Answer 2

Unter der Annahme, dass Sie die Angular CLI verwenden Projekt zu Gerüst (Ich hoffe, dass Sie sind), sollten Sie bereits Zugriff auf verschiedene haben Umgebungseinstellungen. Mit diesen Dateien können Sie auf einfache Weise Werte für Ihre Anwendung bereitstellen, die je nach Ausführungsort variieren können.

environment.ts stellt die Schnittstelle für Ihre Umgebung Werte und dann environment.qa.ts, environment.prod.ts usw. (Sie können beliebig viele Umgebungen erstellen, wie Sie möchten) können Sie verschiedene Werte angeben, die zu dieser Umgebung entsprechen.

Unter der Annahme, dass Sie so etwas in Ihrer Umgebung Datei:

export const environment = { 
    myEndpoint: 'localhost:3000' 
} 

Sie können die App mit der --env Flagge die entsprechenden Werte erhalten laufen oder bauen:

ng build --env=qa 

Zugriff Die in Ihrer env-Konfiguration definierten Werte sind einfach. In Ihrem Dienst oder eine Komponente nur einen Import für Umwelt hinzuzufügen:

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

Und dann den Wert verwenden:

this.http.get(environment.myEndpoint) 

Answer 3

Lösungen mit irgendwie die „richtige“ URL immer nicht funktioniert hat.
Es stellte sich heraus, dass dies zu einer Situation führte, in der ein http.put (...) auf dem Restserver als OPTIONS-Anfrage gesehen wurde.

Angular $http is sending OPTIONS instead of PUT/POST

Ich fand eine Arbeits Weise durch Proxying von dem Winkel Server an den Rest Server:

angular-cli server - how to proxy API requests to another server?

ng serve --proxy-config proxy.conf.json 

die proxy.conf.json:

{ 
    "/api": { 
     "target": "http://localhost:3000", 
     "secure": false 
    } 
}