Imposta l’URL di base per le richieste http 2 angolari

Sto cercando di impostare l’URL di base per tutte le mie richieste http 2 angolari. Di seguito è riportato l’impostazione di base per la mia applicazione.

class HttpOptions extends BaseRequestOptions { url:string = "http://10.7.18.21:8080/api/"; } bootstrap(AppComponent, [ HTTP_PROVIDERS, provide(RequestOptions, {useClass: HttpOptions}) ]); export class AppComponent { users:Array constructor(private http: Http) { http.get("/users") .subscribe(res => this.users = res.json()); } } 

La richiesta non viene inviata a http://10.7.18.21:8080/api/users come mi aspettavo dalla mia configurazione. Invece la richiesta viene inviata a http: // localhost: 8000 / users .

Come imposto l’url di base per la richiesta http nell’applicazione angular 2?

Sto usando Angular 2.0.0-beta.0 .

Per angolari 4,3+ e @ angolari / comuni / http

È semplice con gli intercettori

 @Injectable() export class ExampleInterceptor implements HttpInterceptor { intercept(req: HttpRequest, next: HttpHandler): Observable> { const url = 'http://myurl.com'; req = req.clone({ url: url + req.url }); return next.handle(req); } } 

app.module.ts

 import { NgModule } from '@angular/core'; import { Injectable } from '@angular/core'; import { HttpClientModule, HttpRequest, HTTP_INTERCEPTORS } from '@angular/common/http'; @NgModule({ declarations: [ AppComponent, ... ], imports: [ BrowserModule, HttpClientModule, ... ], providers: [ AppComponent, { provide: HTTP_INTERCEPTORS, useClass: ExampleInterceptor, multi: true } ], bootstrap: [ AppComponent ] }) export class AppModule { } 

EDIT: HttpClient e HttpInterceptor sono introdotti in Angular 4.3

AGGIORNAMENTO: vedere la risposta di @vegazz per Angular 4.

Per Angular 2.2.1, il seguente dovrebbe prefisso l’URL di base di api web e rappresenta un footprint più piccolo:

 import {Request, XHRBackend, XHRConnection} from '@angular/http'; @Injectable() export class ApiXHRBackend extends XHRBackend { createConnection(request: Request): XHRConnection { if (request.url.startsWith('/')){ request.url = 'http://localhost:3000' + request.url; // prefix base url } return super.createConnection(request); } } 

Iniettare nei fornitori in app.module.ts:

 providers: [ { provide: XHRBackend, useClass: ApiXHRBackend } ] 

Esempio di utilizzo:

 this._http.post('/api/my-route', {foo: 'bar'}) .map(res => res.json()) 

Sembra coprire tutti i metodi (GET, PUT, POST, …)

Per Angular2 versione 2.2 (come per dicembre 2016)

Angolare da RC5 contrassegna HTTP_PROVIDERS come deprecato e cercando di spostare le cose in @NgModule , la soluzione di cui sopra non è realmente applicabile, così come la loro documentazione. Ho incrociato diverse altre risposte e ho trovato il modo di implementare l’url di base, spero che questo possa essere utile a qualcun altro.

L’idea di base è, invece di fare le cose in bootstrap, spostiamo le cose su AppModule .

app.module.ts

 import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { HttpModule, RequestOptions } from '@angular/http'; import { CustomRequestOptions } from './customrequest.options'; @NgModule({ declarations: [ AppComponent, ... ], imports: [ BrowserModule, HttpModule, ... ], providers: [ { provide: RequestOptions, useClass: CustomRequestOptions } ], bootstrap: [ AppComponent ] }) 

E sposta CustomRequestOptions in un servizio iniettabile separato

 import { Injectable } from '@angular/core'; import { BaseRequestOptions, RequestOptions, RequestOptionsArgs } from '@angular/http'; @Injectable() export class CustomRequestOptions extends BaseRequestOptions { merge(options?:RequestOptionsArgs):RequestOptions { options.url = 'http://localhost:9080' + options.url; return super.merge(options); } } 

Modifica per il metodo di richiesta diverso da GET.

Se si sta tentando di inviare un tipo di richiesta diverso da GET, il metodo precedente non riesce a iniettare il baseurl nella richiesta. Questo perché Angular2 genera nuove RequestOptions diverse da this._defaultOptions cui metodo di unione non viene sovrascritto dalle nostre CustomRequestOptions. (Vedi il codice sorgente qui).

Quindi, invece di restituire super.merge(...) nell’ultimo passaggio del metodo di unione CustomRequestOptions, ho generato una nuova istanza di CustomRequestOptions per garantire che la seguente operazione continui a funzionare.

 import { Injectable } from '@angular/core'; import { RequestOptions, RequestOptionsArgs } from '@angular/http'; @Injectable() export class CustomRequestOptions extends RequestOptions { merge(options?: RequestOptionsArgs): RequestOptions { if (options !== null && options.url !== null) { options.url = 'http://localhost:9080' + options.url; } let requestOptions = super.merge(options) return new CustomRequestOptions({ method: requestOptions.method, url: requestOptions.url, search: requestOptions.search, headers: requestOptions.headers, body: requestOptions.body, withCredentials: requestOptions.withCredentials, responseType: requestOptions.responseType }); } } 

E questo funziona anche per il metodo POST, PUT, DELETE. Spero che questo sia utile.

In Angular 2.0.0-beta.6 È ansible ottenere ciò ignorando “unisci”

 import {BaseRequestOptions, RequestOptions, RequestOptionsArgs} from 'angular2/http'; export class ApRequestOptions extends BaseRequestOptions { merge(options?:RequestOptionsArgs):RequestOptions { options.url = 'http://10.7.18.21:8080/api' + options.url; return super.merge(options); } } 

Dopo aver esaminato le origini del codice per le BaseRequestOptions , RequestOptions e Http :

  • base_request_options.ts
  • http.ts

Sembra che la proprietà url corrisponda all’URL predefinito ma non un prefisso per gli URL.

Per implementare il tuo caso d’uso, suggerirei di mettere un servizio di fronte all’object http e di iniettare il servizio. Qualcosa del genere:

 import {Injectable} from '@angular/core'; import {Http} from '@angular/http'; @Injectable() export class HttpClient { http: Http; urlPrefix: string; constructor(http: Http) { this.http = http; this.urlPrefix = 'http://...'; } get(url) { return this.http.get(this.urlPrefix + url); } post(url, data) { return this.http.post(this.urlPrefix + url, data); } } 

E

 import {HttpClient} from './http-client'; export classMyComponent { constructor(httpClient: HttpClient) { this.httpClient = httpClient; } handleSomething() { this.httpClient.post(url, data) ).subscribe(...); } } 

Detto questo potrebbe forse essere contribuito a Angular2 stesso 😉

Spero che ti aiuti, Thierry

 import {LocationStrategy} from 'angular2/router'; constructor(private locationStrategy:LocationStrategy) { console.log(locationStrategy.prepareExternalUrl('xxx')); } 

Vedi anche https://github.com/angular/angular/blob/1bec4f6c6135d7aaccec7492d70c36e1ceeaeefa/modules/angular2/test/router/path_location_strategy_spec.ts#L88

Approccio diverso: durante lo sviluppo della tua app in localhost, considera la possibilità di configurare un proxy .

proxy.conf.json

 { "/api/**": { "target": "http://10.7.18.21:8080/", "secure": false, "logLevel": "debug" } } 

Altro: link

Per l’utente attuale, qui è davvero un esempio funzionante in angular 2.4.8

ecco il codice per spiegare perché BasicCommonRequestOptions e CommonRequestOptions divisi e concatenati.

 import { BaseRequestOptions, Headers, RequestOptions, RequestOptionsArgs } from '@angular/http'; import { Injectable } from '@angular/core'; @Injectable() export class BaseCommonRequestOptions extends BaseRequestOptions { merge(options?: RequestOptionsArgs): RequestOptions { return new CommonRequestOptions(super.merge(extracted(options))); } } /** * for inner merge when using post put patch delete...others method */ export class CommonRequestOptions extends RequestOptions { merge(options?: RequestOptionsArgs): RequestOptions { return new RequestOptions(super.merge(extracted(options))); } } /** * inject default values * * @param options * @returns {RequestOptionsArgs} */ export function extracted(options: RequestOptionsArgs) { console.log(options); if (!validUrl(options.url)) { options.url = 'http://localhost:3000' + (options.url ? options.url : ""); } // use default header application/json, if content-type header was empty. if (options.headers != null) { let contentType = options.headers.get('content-type'); if (contentType == null || contentType == '') { options.headers.append('content-type', 'application/json'); } } else { options.headers = new Headers({ 'content-type': 'application/json' }); } return options; } /** * validate url * * @param url * @returns {boolean} */ export function validUrl(url: string) { return /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/.test(url); } 

creare un file .ts

 import { Injectable } from '@angular/core'; import {Request, XHRBackend, XHRConnection} from '@angular/http'; @Injectable() export class ApiXHRBackend extends XHRBackend { createConnection(request: Request): XHRConnection { if (request.url.startsWith('/api')){ var url=request.url.replace("/api", ""); request.url = 'http://localhost:8080' + url; // prefix base url } return super.createConnection(request); } } 

Quindi in app.module.ts

 import { ApiXHRBackend } from './guard/httpintercepter'; import {Request, XHRBackend, XHRConnection} from '@angular/http'; 

Aggiungi il fornitore nella sezione dei fornitori

 providers: [ {provide: XHRBackend, useClass: ApiXHRBackend } ], 

quindi nella tua http di servizio. la chiamata http deve essere come nell’esempio seguente

 return this._http.post("/api/customerservice/loginvalidation",data) .map((response: Response) => { return response; }); 

Here / api verrà sostituito dall’URL di base http: // localhost: 8080

maggiori dettagli http://shabeen.in/webschool/how-to-set-angular-2-service-http-base-url/