Добавляем скомпилированный фронт внутрь jar-файла при его сборке22.01.2025 11:00

Отлично, мы видели, что с простым html/js всё работает. Давайте теперь создадим фронт на ангуляре

Выполним команду ng new front-angular для создания скелета ангуляр-проекта

Добавим в файл app.config.ts провайдер provideHttpClient () для получения возможности использовать http-клиент

import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';
import { provideHttpClient } from '@angular/common/http';

export const appConfig: ApplicationConfig = {
  providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes),  provideHttpClient()]
};

В файле app.component.html оставим только следующий код

От сервера получено: {{data}}

Для нас важна ссылка на переменную data в которую мы будем складывать ответ бэка, то есть случайное число

Наконец сам компонент app.component.ts

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { HttpClient } from '@angular/common/http';
import { timer } from 'rxjs';

@Component({
  selector: 'app-root',
  imports: [RouterOutlet],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  baseUrl:string=window.location.origin;
  data:string = 'пусто';

  constructor(private httpClient: HttpClient) {}

  ticks =0;
  ngOnInit(){
    let timer$ = timer(2000,3000);
    timer$.subscribe((t: number)=>{
      this.ticks = t
      this.httpClient.get(this.baseUrl+"/api/v1/test/random").subscribe(
        value =>{
         this.data=value.toString();
        },
        error => {console.log(error)}
      );
    });
  }
}

Здесь всё аналогично. Запускаем таймер, который каждые три секунды делает запрос к апи бэка получая его адрес через window.location и, в случае получения успешного ответа, сохраняет его в переменной data

Скомпилируем полученный код командой npm run build которая создаст каталог dist

Скопируем содержимое каталога \FrontInBack\front-angular\dist\front-angular\browser\ в папку static нашего бэка

Запустим бэк через задачу запуска bootRun или задачу компиляции jar-файла bootJar с последующим запуском через java -jar имя-файла-сгенерированного-в-back-web-server\build\libs\

Зайдём браузером на тот же адрес http://localhost:8080/index.html и увидим что всё работает

© Habrahabr.ru