Springboot/Angular2 - Comment gérer les urls HTML5 ?

Question

Je pense qu'il s'agit d'une question simple, mais je n'ai pas pu trouver de réponse ou du moins utiliser les bons termes dans la recherche.

Je suis en train de mettre en place Angular2 et Springboot ensemble. Par défaut, Angular utilisera des chemins comme localhost:8080\dashboard et localhost:8080\dashboard\detail .

J'aimerais éviter d'utiliser les chemins comme des hashs, si possible. Comme Angular documentation États :

La fonction provideRouter du routeur définit la LocationStrategy sur la PathLocationStrategy, ce qui en fait la stratégie par défaut. Nous pouvons passer à la stratégie HashLocationStrategy avec une commande prioritaire pendant le processus de démarrage si nous le préférons.

Et puis...

Presque tous les projets Angular 2 devraient utiliser le style HTML 5 par défaut. Il produit des URL plus faciles à comprendre pour les utilisateurs. Et cela permet de conserver la possibilité d'effectuer un rendu côté serveur ultérieurement.

Le problème est que lorsque j'essaie d'accéder localhost:8080\dashboard Spring cherchera un contrôleur correspondant à ce chemin, ce qui n'est pas le cas.

Whitelabel Error Page
There was an unexpected error (type=Not Found, status=404).
No message available

J'ai pensé initialement à faire en sorte que tous mes services soient sous localhost:8080\api et toutes mes statiques sous localhost:8080\app . Mais comment puis-je dire à Spring d'ignorer les requêtes de ce app chemin ?

Existe-t-il une meilleure solution avec Angular2 ou Boot ?

Answer 1

Dans mes applications Spring Boot (version 1 et 2), mes ressources statiques se trouvent à un seul endroit :

src/main/resources/static

static étant un dossier reconnu par Spring Boot pour charger les ressources statiques.

L'idée est ensuite de personnaliser la configuration de Spring MVC.
La méthode la plus simple consiste à utiliser la configuration de Spring Java.

Je mets en œuvre WebMvcConfigurer pour passer outre addResourceHandlers() . J'ajoute dans un simple ResourceHandler à l'actuel ResourceHandlerRegistry .
Le gestionnaire est mappé sur chaque requête et je spécifie classpath:/static/ comme valeur d'emplacement des ressources (vous pouvez bien sûr en ajouter d'autres si nécessaire).
J'ajoute un PathResourceResolver classe anonyme à surcharger getResource(String resourcePath, Resource location) .
Et la règle pour retourner la ressource est la suivante : si la ressource existe et est lisible (donc c'est un fichier), je la retourne. Sinon, par défaut, je retourne le fichier index.html page. Ce qui est le comportement attendu pour gérer les urls HTML 5.

Application Spring Boot 1.X :

Extension du site org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter est le chemin.
Cette classe est un adaptateur de la WebMvcConfigurer interface avec des méthodes vides permettant aux sous-classes de ne surcharger que les méthodes qui les intéressent.

Voici le code complet :

import java.io.IOException;

import org.springframework.context.annotation.Configuration;
import org.springframework.core.io.ClassPathResource;
import org.springframework.core.io.Resource;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
import org.springframework.web.servlet.resource.PathResourceResolver;

@Configuration
public class WebMvcConfig extends WebMvcConfigurerAdapter {

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {

    registry.addResourceHandler("/**/*")
        .addResourceLocations("classpath:/static/")
        .resourceChain(true)
        .addResolver(new PathResourceResolver() {
            @Override
            protected Resource getResource(String resourcePath,
                Resource location) throws IOException {
                  Resource requestedResource = location.createRelative(resourcePath);
                  return requestedResource.exists() && requestedResource.isReadable() ? requestedResource
                : new ClassPathResource("/static/index.html");
            }
        });
    }
}

Application Spring Boot 2.X :

org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter a été déprécié.
Mise en œuvre directe WebMvcConfigurer est la solution actuelle, car il s'agit toujours d'une interface, mais elle possède désormais des méthodes par défaut (rendues possibles par une ligne de base de Java 8) et peut être implémentée directement sans avoir besoin de l'adaptateur.

Voici le code complet :

import java.io.IOException;

import org.springframework.context.annotation.Configuration;
import org.springframework.core.io.ClassPathResource;
import org.springframework.core.io.Resource;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
import org.springframework.web.servlet.resource.PathResourceResolver;

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {

      registry.addResourceHandler("/**/*")
        .addResourceLocations("classpath:/static/")
        .resourceChain(true)
        .addResolver(new PathResourceResolver() {
            @Override
            protected Resource getResource(String resourcePath,
                Resource location) throws IOException {
                Resource requestedResource = location.createRelative(resourcePath);
                return requestedResource.exists() && requestedResource.isReadable() ? requestedResource
                : new ClassPathResource("/static/index.html");
            }
        });
    }
}

Answer 2

J'ai une solution pour vous, vous pouvez ajouter une ViewController pour transmettre les requêtes à Angular depuis Spring boot.

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class ViewController {

@RequestMapping({ "/bikes", "/milages", "/gallery", "/tracks", "/tracks/{id:\\w+}", "/location", "/about", "/tests","/tests/new","/tests/**","/questions","/answers" })
   public String index() {
       return "forward:/index.html";
   }
}

ici j'ai redirigé tous mes angular2 ("/bikes", "/milages", "/gallery", "/tracks", "/tracks/{id : \w +}", "/location", "/about", "/tests", "/tests/new", "/tests/**", "/questions", "/answers") vers mon SPA Vous pouvez faire la même chose pour votre projet et vous pouvez également rediriger votre page d'erreur 404 vers la page d'index comme une étape supplémentaire. Bonne lecture !

Answer 3

Vous pouvez transférer toutes les ressources non trouvées vers votre page principale en fournissant un ErrorViewResolver personnalisé. Tout ce que vous avez à faire est d'ajouter ceci à votre classe @Configuration :

@Bean
ErrorViewResolver supportPathBasedLocationStrategyWithoutHashes() {
    return new ErrorViewResolver() {
        @Override
        public ModelAndView resolveErrorView(HttpServletRequest request, HttpStatus status, Map<String, Object> model) {
            return status == HttpStatus.NOT_FOUND
                    ? new ModelAndView("index.html", Collections.<String, Object>emptyMap(), HttpStatus.OK)
                    : null;
        }
    };
}

Answer 4

Vous pouvez transférer tout ce qui n'est pas mappé à Angular en utilisant quelque chose comme ceci :

@Controller
public class ForwardController {

    @RequestMapping(value = "/**/{[path:[^\\.]*}")
    public String redirect() {
        // Forward to home page so that route is preserved.
        return "forward:/";
    }
} 

Source : https://stackoverflow.com/a/44850886/3854385

Mon serveur Spring Boot pour angular est également un serveur de passerelle avec les appels API à /api pour ne pas avoir une page de connexion devant les pages angulaires, vous pouvez utiliser quelque chose comme.

import org.springframework.boot.autoconfigure.security.oauth2.client.EnableOAuth2Sso;
import org.springframework.context.annotation.Configuration;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;
import org.springframework.security.web.csrf.CookieCsrfTokenRepository;

/**
 * This sets up basic authentication for the microservice, it is here to prevent
 * massive screwups, many applications will require more secuity, some will require less
 */

@EnableOAuth2Sso
@Configuration
public class SecurityConfiguration extends WebSecurityConfigurerAdapter{

    @Override
    public void configure(HttpSecurity http) throws Exception {
        http
                .logout().logoutSuccessUrl("/").and()
                .authorizeRequests()
                .antMatchers("/api/**").authenticated()
                .anyRequest().permitAll().and()
                .csrf()
                .csrfTokenRepository(CookieCsrfTokenRepository.withHttpOnlyFalse());
    }
}

Answer 5

Pour rendre les choses plus simples, vous pouvez simplement implémenter directement ErrorPageRegistrar

@Component
public class ErrorPageConfig implements ErrorPageRegistrar {

    @Override
    public void registerErrorPages(ErrorPageRegistry registry) {
        registry.addErrorPages(new ErrorPage(HttpStatus.NOT_FOUND, "/"));
    }

}

Cela renverrait les demandes à index.html.

@Controller
@RequestMapping("/")
public class MainPageController {

    @ResponseStatus(HttpStatus.OK)
    @RequestMapping({ "/" })
    public String forward() {
        return "forward:/";
    }
}