Как развернуть фронт Angular 7 с бэкэндом Spring Boot

Question

У меня проблема с подключением Angular-приложения к бэкэнду Spring Boot REST. Есть ли простой способ заставить его работать на одном локальном порту вместе?

Answer 1

Если вы запускаете приложение с настройками по умолчанию (Angular CLI: ng serve), интерфейс запускается на порту 4200.

Внутреннее приложение будет запущено на порту, указанном в файле application.yml (или application.properties).

Проверьте, на каком порту вы запускаете фоновое приложение:

server:
  port: ${PORT:10101}

Затем создайте файл proxy.config.json (например, с файлом package.json), который выглядит следующим образом:

{
  "/api/*": {
    "target": "http://localhost:10101",
    "secure": false,
    "logLevel": "debug"
  }
}

Затем добавьте файл package.json в сценарий, который включает запись интерфейсного приложения:

"scripts": {
    "ng": "ng",
    "start": "ng serve --proxy-config proxy.config.json",
...

и запуск интерфейса из терминала:

npm start

Пример @Injectable, запрашивающего серверную часть:

@Injectable()
export class MyService {

  constructor(private http: HttpClient) {
  }

  searchClients(words: string): Observable<ClientDTO[]> {
    return this.http.get<ClientDTO[]>('api/client/search?searchWords=' + encodeURIComponent(words));
  }

}

И back-end @RestController:

@RestController
@RequestMapping(path = "api/client")
public class ClientController {

    private final ClientService clientService;

    @Autowired
    public ClientController(ClientService clientService) {
        this.clientService = clientService;
    }

    @GetMapping(path = "search")
    public ResponseEntity<List<ClientDTO>> searchClient(@RequestParam String searchWords) {
        return ResponseEntity.ok(clientService.searchClient(searchWords));
    }

}