Angular 4.0: establecer la URL base para las llamadas REST

1

Estoy desarrollando un proyecto Angular con Spring Boot, Maven y Eclipse. Quiero usar "ng serve", por lo que no tengo que compilar cada vez. Así que estoy tratando de acceder a la página web desde Angular usando 'ng serve' y obtener datos de Spring Boot usando llamadas REST. Ahora que ya tengo muchas llamadas REST, no quiero ir a cada archivo y cambiar la URL a http: // localhost: 8080 / api / survey

Quiero agregar http: // localhost: 8080 a todas las llamadas REST. Intenté debajo del código, pero todavía está llamando a http: // localhost : 4200 / api / survey

Creado IqsInterceptor.ts:

import {  Injectable, } from '@angular/core';
import {  HttpRequest,  HttpHandler,  HttpEvent,  HttpInterceptor} from '@angular/common/http';
import {  Observable} from 'rxjs/Observable';

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

App.module.ts actualizado:

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {AlertService} from './alert/alert.service';
import {FormsModule} from '@angular/forms';
import {HttpModule} from '@angular/http';
import { Injectable } from '@angular/core';
import { HttpClientModule, HttpRequest, HTTP_INTERCEPTORS } from '@angular/common/http';

import {IqsInterceptor} from './IqsInterceptor';

@NgModule({
    imports: [
        BrowserModule,
        HttpClientModule,
        FormsModule,
        HttpModule,
        AppRoutingModule
    ],
    providers: [
        AppComponent,
        { provide: HTTP_INTERCEPTORS, useClass: IqsInterceptor, multi: true }

    ],
    declarations: [
        AppComponent,
        . . . Other components
    ],
    bootstrap: [AppComponent]
})
export class AppModule {
}

Puede ver mi pregunta anterior para obtener más información: Angular 4 + springboot + Maven + Eclipse: tengo que construir cada vez

5

puede agregar un proxy-conf.json

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

}

Y su comando npm start cambiaría a " ng serve --proxy-config proxy-conf.json -o"

Dado que Angular se está ejecutando en el servidor de desarrollo, se ejecutaría en el puerto 4200, y Spring Boot se está ejecutando en el puerto 8080. Puede usar el proxy conf para decirle que pase los datos a un host diferente cuando lo ejecute en su entorno local.

2
  • ¿Cuál sería la ruta de proxy-conf.json?
    SK.
    19/04/18 a las 19:39
  • el mismo nivel donde existe el package.json 19/04/18 a las 19:39