page - Establecer url base para solicitudes http angulares 2
router events angular 6 (9)
Para la versión 2.2 de Angular2 (En cuanto a diciembre de 2016)
Angular desde RC5 marca HTTP_PROVIDERS como obsoleto y tratando de mover cosas a @NgModule , la solución anterior no es realmente aplicable, por lo que su documentación. Crucé varias respuestas más y encontré la manera de implementar la URL base, espero que esto pueda ser útil para otra persona.
La idea básica es, en lugar de hacer cosas en bootstrap, mover las cosas a 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 ]
})
Y mueva CustomRequestOptions en un servicio inyectable separado
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);
}
}
Editar para el método de solicitud que no sea GET.
Si está intentando enviar un tipo de solicitud distinto de GET, el método anterior no puede inyectar la baseurl en la solicitud. Esto se debe a que Angular2 genera nuevas RequestOptions distintas de this._defaultOptions cuyo método de fusión no se reemplaza por CustomRequestOptions. (Vea el código fuente aquí).
Entonces, en lugar de devolver super.merge(...) en el último paso del método de fusión CustomRequestOptions, generé una nueva instancia de CustomRequestOptions para asegurar que la siguiente operación aún funcione.
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
});
}
}
Y esto también funciona para el método POST, PUT, DELETE. Espero que esto sea útil.
Estoy tratando de establecer la URL base para todas mis solicitudes angulares 2 http. A continuación se muestra la configuración básica para mi aplicación.
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<User>
constructor(private http: Http) {
http.get("/users")
.subscribe(res => this.users = res.json());
}
}
La solicitud no se envía a http://10.7.18.21:8080/api/users como esperaba de mi configuración. En cambio, la solicitud se envía a http://localhost:8000/users .
¿Cómo configuro la url base para la solicitud http en la aplicación angular 2?
Estoy usando Angular 2.0.0-beta.0 .
ACTUALIZACIÓN: Consulte @vegazz answer para Angular 4.
Para Angular 2.2.1, lo siguiente debe prefijar la URL base de la API web y representa una huella más pequeña:
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);
}
}
Inyectar en proveedores en app.module.ts:
providers: [
{ provide: XHRBackend, useClass: ApiXHRBackend }
]
Ejemplo de uso:
this._http.post(''/api/my-route'', {foo: ''bar''})
.map<MyResponse>(res => res.json())
Parece cubrir todos los métodos (GET, PUT, POST, ...)
Después de echar un vistazo a las fuentes de código para las BaseRequestOptions , RequestOptions y Http :
Parece que la propiedad url corresponde a la URL predeterminada pero no a un prefijo para URL.
Para implementar su caso de uso, sugeriría poner un servicio delante del objeto http e inyectar el servicio. Algo como eso:
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);
}
}
Y
import {HttpClient} from ''./http-client'';
export classMyComponent {
constructor(httpClient: HttpClient) {
this.httpClient = httpClient;
}
handleSomething() {
this.httpClient.post(url, data)
).subscribe(...);
}
}
Dicho esto tal vez podría ser contribuido a Angular2 en sí ;-)
Espero que te ayude, Thierry
En Angular 2.0.0-beta.6 puedes lograr esto anulando ''fusionar''
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);
}
}
Enfoque diferente: durante el desarrollo ejecutando su aplicación en localhost, considere configurar un proxy .
proxy.conf.json
{
"/api/**": {
"target": "http://10.7.18.21:8080/",
"secure": false,
"logLevel": "debug"
}
}
Más: link
Para el usuario actual, aquí está realmente el ejemplo de trabajo en 2.4.8 angular
here está el código de por qué dividió y encadenó BaseCommonRequestOptions y CommonRequestOptions .
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);
}
crea un archivo .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);
}
}
Luego, en app.module.ts
import { ApiXHRBackend } from ''./guard/httpintercepter'';
import {Request, XHRBackend, XHRConnection} from ''@angular/http'';
Añadir proveedor en la sección de proveedores
providers: [
{provide: XHRBackend, useClass: ApiXHRBackend }
],
luego, en su servicio, su llamada http debe ser como el ejemplo siguiente
return this._http.post("/api/customerservice/loginvalidation",data)
.map((response: Response) => {
return response;
});
Aquí / api será reemplazado por su URL base http: // localhost: 8080
más detalles http://shabeen.in/webschool/how-to-set-angular-2-service-http-base-url/
Para angular 4.3+ y @ angular / común / http
Es simple con los interceptores
@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.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 { }
EDITAR: HttpClient y HttpInterceptor se introducen en Angular 4.3
import {LocationStrategy} from ''angular2/router'';
constructor(private locationStrategy:LocationStrategy) {
console.log(locationStrategy.prepareExternalUrl(''xxx''));
}