Setzen Sie die Basis-url für Winkel-2 http-requests

Für eckige 4.3+ und @Winkel/common/http

Einfach mit Abfangjäger

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

app.- Modul.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-und HttpInterceptor eingeführt werden, sind in Eckige 4.3

InformationsquelleAutor der Antwort vegazz

Für Angular2 Version 2.2 (für Dec 2016)

Winkel von RC5 mark HTTP_PROVIDERS als veraltet und versuchen, die Dinge bewegen, in @NgModuledie obige Lösung ist nicht wirklich anwendbar, so wie Ihre Dokumentation. Ich Kreuz bezeichnet mehrere andere Antworten und meinen Weg gefunden zu implementieren Basis-url, hoffe, dass dies hilfreich sein, jemand anderes.

Die grundlegende Idee ist, statt die Dinge zu tun, in der bootstrap-wir bewegen Dinge zu AppModule.

app.- Modul.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 ]
})

Bewegen und CustomRequestOptions in einem separaten injizierbaren service

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);
  }
}

Bearbeiten für die Anfrage einer anderen Methode als GET.

Wenn Sie versuchen, um Anfrage senden Typ andere, als die Vorherige Methode fehlschlägt, um zu injizieren, die URL in der Anfrage. Dies ist, weil Angular2 generieren neue RequestOptions andere als this._defaultOptions deren merge-Methode nicht überschreiben, indem Sie unsere CustomRequestOptions. (Siehe die Quellcode hier).

Also anstatt super.merge(...) im letzten Schritt CustomRequestOptions merge-Methode, die ich erzeugt eine neue Instanz von CustomRequestOptions zu gewährleisten, die folgende operation wird immer noch funktionieren.

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
    });
  }
}

Funktioniert, POST -, PUT -, DELETE-Methode als gut. Hoffe, das ist hilfreich.

InformationsquelleAutor der Antwort yeelan

Nach einem Blick auf Quellen für BaseRequestOptionsRequestOptions und Http Klassen:

• base_request_options.ts
• http.ts

Scheint es, dass die url Eigenschaft entspricht der Standard-URL, aber nicht den Präfix für URLs.

Zur Implementierung der use-case -, würde ich vorschlagen, setzen Sie einen service vor dem http-Objekt und Spritzen Sie dann den Dienst. So etwas wie:

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);
  }
}

Und

import {HttpClient} from './http-client';

export classMyComponent {
  constructor(httpClient: HttpClient) {
    this.httpClient = httpClient;
  }

  handleSomething() {
    this.httpClient.post(url, data)
    ).subscribe(...);
  }
}

Dass sagte, diese könnten vielleicht dazu beigetragen, Angular2 sich selbst 😉

Hoffe es hilft dir,
Thierry

InformationsquelleAutor der Antwort Thierry Templier

Anderen Ansatz: während der Entwicklung ausführen Ihrer app auf localhost konfigurieren einer proxy statt.

proxy.conf.json

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

Mehr: link

InformationsquelleAutor der Antwort istibekesi