Angular + Springboot: как сделать резервное приложение Routed angular для index.html со стороны сервера?

Question

Внешний интерфейс моего приложения написан на Angular, а службы написаны с использованием Spring Boot.Мой угловой код и код служб размещены на двух разных URL-адресах.

Проблема: при перезагрузке любой страницы выдается ошибка 404.

Я хочу реализовать решение, упомянутое вследующая ссылка в разделе конфигурации сервера: https://angular.io/guide/deployment#fallback

Как передать страницу index.html со стороны сервера в угловую, если они размещены на 2 разных ссылках?

Answer 1

Я разработал приложение, имеющее ту же архитектуру, то есть Spring для внутреннего интерфейса, Angular для внешнего интерфейса.

В этом сценарии мне хотелось бы иметь суффикс для углового приложения следующим образом

@Controller
public class InitController {

    @GetMapping("/ng-app/**")
    public String handleNgApp(Model model) {
        return "ng-app/index";
    }

И предоставьте следующую конфигурацию в качестве преобразователя шаблона.Я использую thymeleaf, но вы можете использовать что угодно.

@Bean
public SpringResourceTemplateResolver thymeleafTemplateResolver() {
    SpringResourceTemplateResolver templateResolver = new SpringResourceTemplateResolver();
    templateResolver.setPrefix("classpath:/templates/"); // /WEB-INF/ or classpath:/templates/
    templateResolver.setSuffix(".html");
    templateResolver.setTemplateMode("LEGACYHTML5"); // HTML5 or LEGACYHTML5
    templateResolver.setCharacterEncoding("UTF-8");
    return templateResolver;
}

И, наконец, когда я создаю свое угловое приложение, я задаю путь вывода следующим образом

ng build --prod -op=<root-directory-of-spring>/src/main/resources/templates/ng-app

-op он же output-path предназначен для angular-cli, чтобы узнать, где разместить скомпилированные ресурсы.

При этой настройке, когда пользователь приходит в ваше приложение и перемещается по дочернему маршруту, давайте назовем его home, адресная строка будет выглядеть так: yourdomain.com/ng-app/home.

Когда вы нажимаете кнопку обновления, браузер отправляет запрос на /ng-app/home, который будет обработан InitController.После этого будет возвращено приложение angular, а angular перейдет к маршруту home.Все будут счастливы.